plaatjes links en rechts uitlijnen

Status
Niet open voor verdere reacties.
P

pascallino

Gebruiker
Lid geworden
29 dec 2009
Berichten
167
Hallo allemaal,

Ik ben bezig met een website voor CSVC.
Nu wou ik in de header drie plaatjes verwerken.
Dat is me gelukt alleen nu moeten die plaatjes links, in het midden en rechts woden uitgelijnd. Maar hoe doe ik dat?
Dit is mijn css:
Code: 
body {
	margin: 0;
  background: #ff9c00;
	font-family: Arial;
	cursor: default;
	background-image: url(images/top_2.gif) repeat-x top left; 
  background-repeat: repeat-x;
  background-position: top left;
  background-attachment:fixed;
}

img.image_left {
width: 145px;
position:relative;
margin:0%;
}

img.image_middle {
text-align: center; 
vertical-align: 0;
}

img.image_right {

width:237px;
position:relative;
}
Dit is mijn HTML:
HTML: 
<body>
<!-- Header -->
<img class="image_left" src="images/top_1.gif">
<img class="image_mclassdle" src="images/startpaginawebsite.gif">
<img class="image_right" src="images/top_3.gif">
</body>
En zo ziet het er uit:
attachment.php

Kan iemand mij helpen?
Mvg. Pascallino
 

Bijlagen

  • Knipsel.PNG
    Knipsel.PNG
    51,4 KB · Weergaven: 232
Laatst bewerkt:
Met als principe denk ik de linker- en rechter-afbeelding laten drijven:
Code: 
#header {
    height: 145px;
    text-align: center; /* voor de middelste */
    }
#header .left {
    float: left;
    width: 145px;
    }
#header .right{
    float: right;
    width: 237px;
    }
#header .middle {
    margin: 0 237px 0 145px; /* midden gerekend vanaf/tussen de twee zijkant-images */
    }
en dan:
HTML: 
<body>
<div id="header">
    <img class="left" src="images/top_1.gif">
    <img class="right" src="images/top_3.gif">
    <img class="middle" src="images/startpaginawebsite.gif">
</div>
</body>
(de middelste, niet-drijvende afbeelding moet dan als laatste komen)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hartstikke bedankt.
Het werkt met de code.
Alleen hoe kan ik een achtergrond achter deze plaatjes krijgen.
zoals hier: (bewerkt met paint)
attachment.php

Dit is wat ik tot nu toe heb: (maar het werkt niet!)
Code: 
body {
	margin: 0;
                background: #ff9c00;
	font-family: Arial;
	cursor: default;
	background-image: url(images/top_2.gif) repeat-x top left; 
                background-repeat: repeat-x;
                background-position: top left;
                background-attachment:fixed;
}
 

Bijlagen

  • Knipsel.PNG
    Knipsel.PNG
    53,5 KB · Weergaven: 226
Laatst bewerkt:
Ah, je hebt in de css de gewone en de verkorte schrijfwijze gemengd, en dat vinden browsers niet leuk (en de css-validator ook niet, die is goed behulpzaam om dit soort dingen te ontdekken!).
Er staat nu:
Code: 
background[COLOR="darkred"]-image[/COLOR]: url(images/top_2.gif) repeat-x top left; 
background-repeat: repeat-x;
background-position: top left;
background-attachment:fixed;
Het moet zijn ofwel:
Code: 
background-image: url(images/top_2.gif); 
background-repeat: repeat-x;
background-position: top left;
background-attachment:fixed;
Ofwel:
Code: 
background: url(images/top_2.gif) fixed repeat-x top left;
Dat is de verkorte schrijfwijze, die niet met background-image maar met alleen background moet beginnen, omdat hier ook andere bg-eigenschappen dan het image worden opgegeven.
Verder zou ik de "fixed" schrappen, anders gaan straks de afbeeldingen in de kop bij het scrollen mee-omhoogscrollen, maar blijft het achtergrond-img bovenaan staan.

Met vriendelijke groet,
CSShunter
 
Bedankt het is gelukt.
Ik heb nog één vraag. Over het menu. Ik wou een dropdown menu invoegen. Het menu moet kunnen omgaan met Concrete5 menu's. Dit is wat ik tot nu toe heb maar de dropdown werkt alleen niet.
De css:
Code: 
#headerNav {
    width:745px; 
    height:32px; 
    position:relative; 
    z-index:100;
    border-right:1px solid #585752; 
    font-family:arial, sans-serif;
}

/* hack to correct IE5.5 faulty box model */
* html #headerNav {
    width:746px; 
    w\idth:745px;
}

/* remove all the bullets, borders and padding from the default list styling */
ul.nav {
    padding:0;
    margin:0;
    list-style-type:none;
}

ul.nav ul { 
    padding:0;
    margin:0;
    list-style-type:none;
}

.nav ul ul {
    width:149px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.nav li {
    float:left;
    width:149px;
    position:relative;
}

/* style the links for the top level */
.nav a, .nav a:visited {
    display:block;
    font-size:12px;
    text-decoration:none; 
    color:#fff; 
    width:138px; 
    height:30px; 
    border:1px solid #585752; 
    border-width:1px 0 1px 1px; 
    background:#3300CC; 
    padding-left:10px; 
    line-height:29px; 
    font-weight:bold;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .nav a, * html .nav a:visited {
    width:149px; 
    w\idth:138px;
}

/* style the second level background */
.nav ul ul a, .nav ul ul a:visited {
    background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;
}

/* style the second level hover */
.nav ul ul a.drop:hover{
    background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;
}

.nav ul ul :hover > a.drop {
    background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;
}

/* style the third level background */
.nav ul ul ul a, .nav ul ul ul a:visited {
    background:#e2dfa8;
}

/* style the third level hover */
.nav ul ul ul a:hover {
    background:#b2ab9b;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.nav ul ul {
    visibility:hidden; 
    position:absolute;
    height:0;
    top:31px;
    left:0; 
    width:149px;
    border-top:1px solid #000;
}

/* another hack for IE5.5 */
* html .nav ul ul {
    top:30px;
    t\op:31px;
}

/* position the third level flyout menu */
.nav ul ul ul{
    left:149px; 
    top:-1px; 
    width:149px;
}

/* position the third level flyout menu for a left flyout */
.nav ul ul ul.left {
    left:-149px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.nav table {
    position:absolute; 
    top:0; 
    left:0; 
    border-collapse:collapse;
}

/* style the second level links */
.nav ul ul a, .nav ul ul a:visited {
    background:#e5e1d6; 
    color:#000; 
    height:auto; 
    line-height:1em; 
    padding:5px 10px; 
    width:128px;
    border-width:0 1px 1px 1px;
}

/* yet another hack for IE5.5 */
* html .nav ul ul a, * html .nav ul ul a:visited {
    width:150px;
    w\idth:128px;
}

/* style the top level hover */
.nav a:hover, .nav ul ul a:hover{
    color:#000; 
    background:#fcd6a7;
}

.nav :hover > a, .nav ul ul :hover > a {
    color:#000; 
    background:#fcd6a7;
}

/* make the second level visible when hover on first level list OR link */
.nav ul li:hover ul,
.nav ul a:hover ul{
    visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.nav ul :hover ul ul{
    visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.nav ul :hover ul :hover ul{
    visibility:visible;
}

De html:
HTML: 
<div id="headerNav">
			<ul class="nav">
			
			<li class="nav-selected nav-path-selected">
			<a class="nav-selected nav-path-selected"  href="/cms/">Home</a>
			</li>
			
			<li>
			<a href="/cms/index.php/about/"  >About</a>
			<ul>
			<li>
			<a href="/cms/index.php/about/guest-book/"  >Guestbook</a>
			</li>
			</ul>
			</li>
			<li>
			<a href="/cms/index.php/blog/"  >Blog</a>
			<ul>
			<li>
			<a href="/cms/index.php/blog/my-first-blog-post/"  >My First Blog Post</a>
			</li>
			<li>
			<a href="/cms/index.php/blog/adding-a-new-post/"  >Adding a New Post</a>
			</li>
			</ul>
			</li>
			<li>
			<a href="/cms/index.php/search/"  >Search</a>
			</li>
			</ul>
</div>
Als iemand wil helpen graag.
Ik kom er echt niet uit.
Mvg. Pascallino
 
Er staan een paar ulletjes te veel in de css. Probeer deze eens:
Code: 
/* hide the sub levels and give them a positon absolute so that they take up no room */
/* 
.nav [COLOR="darkred"]ul[/COLOR] ul { 
*/
.nav ul {
    visibility:hidden; 
    position:absolute;
    height:0;
    top:31px;
    left:0; 
    width:149px;
    border-top:1px solid #000;
}

/* make the second level visible when hover on first level list OR link */
/*
.nav [COLOR="darkred"]ul[/COLOR] li:hover ul,
.nav [COLOR="darkred"]ul[/COLOR] a:hover ul {
*/
.nav li:hover ul,
.nav a:hover ul {
    visibility:visible;
}
Toelichting:
Het is een kwestie van uittellen. De .nav is zelf al een <ul>.
De submenu-items zitten dus in de .nav ul {...}: de eerste <ul>'s die na de .nav komen, en die moeten in het begin onzichtbaar zijn en bij hover getoond worden.
De extra ul in de css betekent dat in het begin alleen de sub-submenu's niet getoond worden. Maar dan worden de gewone submenu's wel getoond!
Met vriendelijke groet,
CSShunter
 
Hartelijk bedankt dit was precies wat ik nodig had.
Het werkt nu.
Alleen heb ik het idee dat nog niet alles werkt zoal het zou moeten.
Iemand een idee wat de fout is???
Mijn css:
HTML: 
#headerNav {

    width:745px; 

    height:32px; 

    position:relative; 

    z-index:100;

    border-right:1px solid #585752; 

    font-family:arial, sans-serif;

}



/* hack to correct IE5.5 faulty box model */

* html #headerNav {

    width:746px; 

    w\idth:745px;

}



/* remove all the bullets, borders and padding from the default list styling */

ul.nav {

    padding:0;

    margin:0;

    list-style-type:none;

}



ul.nav ul { 

    padding:0;

    margin:0;

    list-style-type:none;

}



.nav ul ul {

    width:149px;

}



/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.nav li {

    float:left;

    width:149px;

    position:relative;

}



/* style the links for the top level */

.nav a, .nav a:visited {

    display:block;

    font-size:12px;

    text-decoration:none; 

    color:#fff; 

    width:138px; 

    height:30px; 

    border:1px solid #585752; 

    border-width:1px 0 1px 1px; 

    background:#3300CC; 

    padding-left:10px; 

    line-height:29px; 

    font-weight:bold;

}



/* a hack so that IE5.5 faulty box model is corrected */

* html .nav a, * html .nav a:visited {

    width:149px; 

    w\idth:138px;

}



/* style the second level background */

.nav ul ul a, .nav ul ul a:visited {

    background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;

}



/* style the second level hover */

.nav ul ul a.drop:hover{

    background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;

}



.nav ul ul :hover > a.drop {

    background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;

}



/* style the third level background */

.nav ul ul ul a, .nav ul ul ul a:visited {

    background:#e2dfa8;

}



/* style the third level hover */

.nav ul ul ul a:hover {

    background:#b2ab9b;

}





/* hide the sub levels and give them a positon absolute so that they take up no room */

.nav ul {

    visibility:hidden; 

    position:absolute;

    height:0;

    top:31px;

    left:0; 

    width:149px;

    border-top:1px solid #000;

}



/* another hack for IE5.5 */

* html .nav ul ul {

    top:30px;

    t\op:31px;

}



/* position the third level flyout menu */

.nav ul ul ul{

    left:149px; 

    top:-1px; 

    width:149px;

}



/* position the third level flyout menu for a left flyout */

.nav ul ul ul.left {

    left:-149px;

}



/* style the table so that it takes no ppart in the layout - required for IE to work */

.nav table {

    position:absolute; 

    top:0; 

    left:0; 

    border-collapse:collapse;

}



/* style the second level links */

.nav ul ul a, .nav ul ul a:visited {

    background:#e5e1d6; 

    color:#000; 

    height:auto; 

    line-height:1em; 

    padding:5px 10px; 

    width:128px;

    border-width:0 1px 1px 1px;

}



/* yet another hack for IE5.5 */

* html .nav ul ul a, * html .nav ul ul a:visited {

    width:150px;

    w\idth:128px;

}



/* style the top level hover */

.nav a:hover, .nav ul ul a:hover{

    color:#000; 

    background:#fcd6a7;

}



.nav :hover > a, .nav ul ul :hover > a {

    color:#000; 

    background:#fcd6a7;

}



/* make the second level visible when hover on first level list OR link */

.nav li:hover ul,

.nav a:hover ul{

    visibility:visible;

}



/* keep the third level hidden when you hover on first level list OR link */

.nav ul :hover ul ul{

    visibility:hidden;

}



/* make the third level visible when you hover over second level list OR link */

.nav ul :hover ul :hover ul{

    visibility:visible;

}
Alvast bedankt.
Met vriendelijke groet,
Pascallino
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan