Hi all,

 

Don't judge plse, im still new to this.

Im supposed to make a website for a travel agency (for school ofcourse), but i can't get it done right.

 

Still stuck on the index page, heres my problem.

They asked to divide the website in 3 i did it with 3x float left and adjusting the margin left. however for some reason the height gets stuck where the content stops.i'd like to fix that.

 

Also trying to slideUp some tekst over my images using jquery. Guess im no hero in this.

 

Can anyone help? you can find my codes here.

fotogallerij.html

index.html

onzereizen.html

reistips.html

Style.css

Update: perhaps its easier to view here: http://users.hogent.be/~b112319it

the css file: http://users.hogent.be/~b112319it/Style.css

Heyhey mate.

 

How to set same height for columns

 

1) Everytime you float something, you need to clear the float afterwards so the content doesn't collapse.

<div id="midden"></div>
<div id="mid"></div>
<div id="rechts"></div>

<div class="clear"></div>

.clear {
    clear: both;
}

2) Wrap your three divs into another div and make it a table. Give your columns a class and make it as high as the container.

<div class="container">

    <div id="midden" class="column"></div>
    <div id="mid" class="column"></div>
    <div id="rechts" class="column"></div>

    <div class="clear"></div>

</div>

.container {

    display: table;
    margin: 0 auto; /* centers the content */

}


.column {

    display: table-cell;
    height: 100%;

}

I think you mean you want some image caption to appear when you hover over the image.

You don't need jQuery. CSS can do the trick as well.

1) Add some text under your image.

<li>

    <img src="..."/>

    <p class="caption">Some text</p>

</li>

2) Set the text above the image and make it visible on hover.

li {
    position: relative;
}

.caption {
    position: absolute;
    bottom: 0;
    opacity: 0;
    transition: .4s ease; /* smooth fade in/out */
}

li:hover .caption {
    opacity: 1;
}

High Pascal,

 

Thanks for replying on such short notice. The first post i will try out in a bit. The second post: u assumed right, i want some tekst to fade over the image when i go over it with my mouse, however, iwas instructed to do this with jquery. i have took the jquery course on www.codeschool.com but i can't seem to make it work in my website...

 

So i realy need to use jquery.

 

grtz,

Ibo

 

Heyhey mate.

 

How to set same height for columns

 

1) Everytime you float something, you need to clear the float afterwards so the content doesn't collapse.

<div id="midden"></div>
<div id="mid"></div>
<div id="rechts"></div>

<div class="clear"></div>

.clear {
    clear: both;
}

2) Wrap your three divs into another div and make it a table. Give your columns a class and make it as high as the container.

<div class="container">

    <div id="midden" class="column"></div>
    <div id="mid" class="column"></div>
    <div id="rechts" class="column"></div>

    <div class="clear"></div>

</div>

.container {

    display: table;
    margin: 0 auto; /* centers the content */

}


.column {

    display: table-cell;
    height: 100%;

}

I tried doing this, but it doesn't change anything. I also tried to give my <div id="wrapper"> the same backgroundcolors as the left and right div. even that doesnt color the bg??? this is strange, am i overseeing something?

I tried doing this, but it doesn't change anything. I also tried to give my <div id="wrapper"> the same backgroundcolors as the left and right div. even that doesnt color the bg??? this is strange, am i overseeing something?

 

Solved the background color problem. it appears in CSS i had #wrapper instead of .wrapper..... i overlooked the dot.

 

However still in search for a solution to slide tekst over my pictures when hovering. And the teacher says it has to be Jquery. plse help.

Interesting that you marked your own post as best answer even though it doesn't contain one.

 

Did you even try to use Google to look for the solution?

 

http://www.w3schools.com/jquery/event_hover.asp

https://api.jquery.com/hover/

Woops, i thought that the "mark solved" button closed this thread, but instead choose best answer. I've fixed the problem. Got it workig. Still need to fix a few thing, but i'll do that later on the day.