probleem height in css

Status
Niet open voor verdere reacties.
djeric

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo.

mijn menu van de foto's werken niet goed.
ik heb wat stukjes code uitgehaald van mijn andere website: klik hier voor het voorbeeld

nu heb ik op: deze webpagina

de volgende html code tussen me <body> </body> tags staan.:

HTML: 
<div id= "inhoud2"> 
<table class="table">
<tr>
<td colspan="2"><img src="index/vink.gif"alt=""><a href="#Fotos Optredens">zomercarnaval 2011 deel 1</a> </td>
<td colspan="2"><img src="index/vink.gif"alt=""><a href="#Fotos Drive in Shows">zomercarnaval 2011 deel 2</a></td>
</tr>
</table>
</div>


<p id="fotos" style="text-align: center; clear: both;">


<a href="foto/rotterdam2011/slides/2.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/2.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/3.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/3.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/4.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/4.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/5.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/5.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/6.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/6.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/7.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/7.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/8.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/8.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/9.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/9.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/10.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/10.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/11.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/11.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/12.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/12.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/13.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/13.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/14.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/14.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/15.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/15.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/16.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/16.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/17.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/17.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/18.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/18.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/19.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/19.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/20.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/20.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/21.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/21.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/22.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/22.JPG" alt=""></a>
<a href="foto/rotterdam2011/slides/23.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2011/thumbs/23.JPG" alt=""></a>

</p>

en de bijbehorende css:

Code: 
#inhoud2 { 
background-attachment : scroll; 
background-repeat : repeat-y; 
margin-left: 180px;
width : 600px; 
color : #fff999; 
font-family : Georgia, "Times New Roman", Times, serif; 
font-style : italic; 
font-size : medium; 
font-weight : 100; 
} 

.table { 
width : 600px; 
text-align : left; 
} 

.tablelinks { 
width : 600px; 
text-align : center; 
border : 1px solid gray; 
} 

#table a, a:link { 
color : #cococo; 
} 

#table a, a:hover, a:visited { 
color : #ffffff; 
} 

.tr { 
width : 150px; 
} 

.td { 
width : 115px; 
} 


p#fotos { 
background-attachment : scroll; 
background-repeat : repeat-y; 
margin-left: 180px;
width : 900px; 
color : #fff999; 
font-family : Georgia, "Times New Roman", Times, serif; 
font-style : italic; 
font-size : medium; 
font-weight : 100; 
}


Ik zoek een oplossing voor:

* nu zie je dat het menu van de foto's een bruine achtergrond kleur heeft. dit wil ik niet. het moet een andere kleur worden maar zeker geen bruin. zie niet waar hij op bruin staat :(

* de menu staat te ver van de titel van de pagina: "Foto's zomer carnaval Rotterdam" ik zie niet iets in de css over plaatsing van boven af. dacht misschien iets met marging code was?

* foto's staan niet op goede hoogte, breedte klopt wel.
ook weer iets met een marging code?


p.s. benaming van foto's komt nog, even eens als de kleuren bij mouse over en moet nog eens goed kijken hoe de foto's openen, liefst zoals yourdjeric
ik moet nartuurlijk door het menu te klikken wel eerst naar de juiste serie foto's gaan. in dit geval is het maar 1 serie.
 
De bruine achtergrond van je foto-menu komt hier vandaan:
Code: 
tr {
    background: none repeat scroll 0 0 #[B]663300[/B];

Het menu staat 'absolute' gepositioneerd.
Als het te ver van de pagina-titel afstaat, kun je dus de positionering aanpassen.
Dit komt uit de code van je website:
Code: 
.table {
    color: #330066;
    height: 50px;
    left: 350px;
    position: absolute;
    top: 280px;

De foto's staan per rij allemaal op dezelfde hoogte;
of bedoel je misschien dat de foto's zelf niet hoog genoeg zijn?
 
tecsman zei:
Het menu staat 'absolute' gepositioneerd.
Als het te ver van de pagina-titel afstaat, kun je dus de positionering aanpassen.
Dit komt uit de code van je website:
Code: 
.table {
    color: #330066;
    height: 50px;
    left: 350px;
    position: absolute;
    top: 280px;

De foto's staan per rij allemaal op dezelfde hoogte;
of bedoel je misschien dat de foto's zelf niet hoog genoeg zijn?
Klik om te vergroten...

de foto's staan opzich goed. alleen het menu niet. die staat op de foto's ik ben bang als ik de top: 280px; code ga veranderen dat dan andere pagina's ook niet meer goed werken. dan staat alles van zijn plek. dus durf hier geen aanpassing te doen.

hou voorkom ik dat andere pagina's geen veranderingen hebben door bovenstaande code volgens jou omschrijving aan te passen ?
 
Je foto-menu staat alleen op die ene pagina. De betreffende CSS-regel heeft alleen betrekking op die ene tabel waarin je foto-menu staat. Daar hebben andere pagina's dus echt geen last van.
 
tecsman zei:
Het menu staat 'absolute' gepositioneerd.
Als het te ver van de pagina-titel afstaat, kun je dus de positionering aanpassen.
Dit komt uit de code van je website:
Code: 
.table {
    color: #330066;
    height: 50px;
    left: 350px;
    position: absolute;
    top: 280px;

De foto's staan per rij allemaal op dezelfde hoogte;
of bedoel je misschien dat de foto's zelf niet hoog genoeg zijn?
Klik om te vergroten...

ik heb de code: margin-top: 100px; toegevoegd aan de p id tag.

nu krijg ik het gewenste resulaat, zonder deze toegevoegde code ging me menu wel op de juiste plaats staan, maar stonden nog op de foto's.
logisch... de foto's staan in een <p></p> en worden apart in de css geplaatst en gepositoneerd.

status: opgelost:d
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan