CSS div width en current. - Softwareontwikkeling

zondag 17 mei 2009 14:39

Acties:

0 Henk 'm!

Topicstarter

Hallo tweakers.
MIjn site staat hier http://mastasidaz.woelmuis.nl

Ik heb een vraag over mijn css ik wil namelijk dat .pic kan groeien in de wijdte en ook altijd centreert. Nu heb ik het bijv. statisch gedaan met de plaatjes van de Opel Astra maar ik wil dat dynamisch.

Ook wil ik een current voor mijn menu creëren dus als je bijv. op Formula 1 klikt dat het dan blauw blijft.

Ik heb zelf al het een en ander geprobeerd maar het wil steeds niet lukken. Hopelijk hebben jullie een idee hoe ik dit kan realiseren.

CSS:

Cascading Stylesheet:

body {
background:url(../img/bg.gif);
}

#maincontainer{
margin: 0 auto 0 auto;
width: 800px;
text-align: left;
}

#banner {
height: 163px;
width: 800px;
border: 1px solid black;
background:url(../img/banner.png);
}

#container {
margin-top: 10px;
width: 800px;
border: 1px solid black;
float: left;
background:url(../img/bg.png);
}

#content {
width: 560px;
float: right;
border-left: 1px solid grey;
border-right: 1px solid grey;
margin-right: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}

#adsense1 {
height: 90px;
width: 728px;
border: 1px solid black;
background: url(../img/adsense1.gif);
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: none;
}


.news {
width: 540px;
margin-left: 10px;
border-bottom: 1px dashed grey;
margin-bottom: 10px;
}

.video {
width: 400px;
height: 300;
margin-left: auto;
margin-right: auto;
}

.pic {
width: 465px;
margin: auto;
}

#menu {
    width: 200px;
    margin: 10px;
    }
    
#menu li a {
    height: 32px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    height: 24px;
    text-decoration: none;
    }   
    
#menu li a:link, #menu li a:visited {
    color: #333;
    display: block;
    background:  url(../img/menu14.gif);
    padding: 8px 0 0 10px;
    }
    
#menu li a:hover {
    color: #FFF;
    background:  url(../img/menu14.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }
    
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

img {
    border: none;
} 

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
}

p {
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 12px;
}

p.post {
font-family: Tahoma, "Times New Roman", Times, serif;
font-size: 9px;
color: grey;
}

Index.html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="eng">

<head>

<title>Racing-League.com - Your info source for Formula 1, A1GP, IRL, GP2  and DTM</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>

<div id="maincontainer">

<div id="banner">

</div>

<div id="adsense1">

</div>

<div id="container">

<div id="content">

<div class="news">

<h2>New Opel Astra departed</h2>

<div class="pic">

<a href="images/opelastra1.jpg" rel="lightbox[opelastra]" title="New Opel Astra"><img src="thumb/opelastra1.jpg" alt=""></a>
<a href="images/opelastra2.jpg" rel="lightbox[opelastra]" title="New Opel Astra"><img src="thumb/opelastra2.jpg" alt=""></a>
<a href="images/opelastra3.jpg" rel="lightbox[opelastra]" title="New Opel Astra"><img src="thumb/opelastra3.jpg" alt=""></a>

</div>

<p class="post">Thursday 7 May 2009.</p> 

</div>

<div class="news">

<h2>Formula 1 Spain Free Practice 1 highlights</h2>

<div class="video"><object type="application/x-shockwave-flash" width="400" height="300" data="http://www.dailymotion.com/swf/700Fkfr7ShJWH4RUx"><param name="movie" value="http://www.dailymotion.com/swf/700Fkfr7ShJWH4RUx" /></object></div> 

&nbsp;

</div>

<div class="news">

<h2>Alonso frightened from bad season start</h2>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum tellus vitae arcu pellentesque nec varius magna fringilla. Pellentesque ac tortor metus, et vulputate leo. Nullam consectetur porttitor elit, at facilisis risus tincidunt ac. Quisque nibh elit, imperdiet at lobortis non, ultricies in orci. Quisque a nulla sit amet enim interdum sollicitudin in gravida nisi. Vestibulum ornare ante eget purus ultricies accumsan. Nullam urna augue, faucibus id porta non, auctor nec diam. Nulla facilisi. Aenean dignissim dolor non nisl aliquam porta. Suspendisse consectetur rutrum dolor, nec mattis massa scelerisque vel. Nunc feugiat gravida risus dignissim mattis. Cras aliquam hendrerit massa, non eleifend dolor aliquet venenatis. Fusce tincidunt accumsan mollis. Duis a ante nec justo posuere tempor. Duis nisl eros, pellentesque sed mattis nec, malesuada a risus. </p> 

<p class="post">Thursday 7 May 2009.</p> 

</div>

<div class="news">

<h2>Ferrari to use Kers in Barcelona</h2>

<p>Ferrari has confirmed that it will continue to use KERS at this weekend's Spanish Grand Prix.</p>

<p>The Maranello-based team was forced to remove KERS at the Chinese Grand Prix because it could not guarantee it would remain reliable.</p>


<p>A statement from Ferrari said: "On the subject of KERS, this will be used again in Spain, after much work has been carried out on the reliability of the system since the last race.</p>

<p>"KERS should be an advantage here for the F60, built to run with the energy system as an intrinsic part of its design, which means that, as was evident in back to back tests during practice in Bahrain, the F60 gains virtually no advantage in terms of car balance, when running without it. KERS can be a significant driver aid at the race start here, as the main straight is very long." </p>

<p class="post">Thursday 7 May 2009.</p> 

</div>

<div class="news">

<h2>Alonso frightened from bad season start</h2>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum tellus vitae arcu pellentesque nec varius magna fringilla. Pellentesque ac tortor metus, et vulputate leo. Nullam consectetur porttitor elit, at facilisis risus tincidunt ac. Quisque nibh elit, imperdiet at lobortis non, ultricies in orci. Quisque a nulla sit amet enim interdum sollicitudin in gravida nisi. Vestibulum ornare ante eget purus ultricies accumsan. Nullam urna augue, faucibus id porta non, auctor nec diam. Nulla facilisi. Aenean dignissim dolor non nisl aliquam porta. Suspendisse consectetur rutrum dolor, nec mattis massa scelerisque vel. Nunc feugiat gravida risus dignissim mattis. Cras aliquam hendrerit massa, non eleifend dolor aliquet venenatis. Fusce tincidunt accumsan mollis. Duis a ante nec justo posuere tempor. Duis nisl eros, pellentesque sed mattis nec, malesuada a risus. </p> 

<p class="post">Thursday 7 May 2009.</p> 

</div>

<div class="news">

<h2>Ferrari to use Kers in Barcelona</h2>

<p>Ferrari has confirmed that it will continue to use KERS at this weekend's Spanish Grand Prix.</p>

<p>The Maranello-based team was forced to remove KERS at the Chinese Grand Prix because it could not guarantee it would remain reliable.</p>


<p>A statement from Ferrari said: "On the subject of KERS, this will be used again in Spain, after much work has been carried out on the reliability of the system since the last race.</p>

<p>"KERS should be an advantage here for the F60, built to run with the energy system as an intrinsic part of its design, which means that, as was evident in back to back tests during practice in Bahrain, the F60 gains virtually no advantage in terms of car balance, when running without it. KERS can be a significant driver aid at the race start here, as the main straight is very long." </p>

<p class="post">Thursday 7 May 2009. Category: Formula 1</p> 

</div>

</div>

<div id="menu">
        <ul>
            <li><a href="index.html" title="Link1">Home</a></li>
            <li><a href="formula1.html" title="Link 1">Formula 1</a></li>
            <li><a href="indyracingleague.html" title="Link 1">Indy Racing League</a></li>
            <li><a href="carnews.html" title="Link 2">General Car News</a></li>
            <li><a href="sendnews.php" title="Link 5">Send News In</a></li>
            <li><a href="#5" title="Link 5">Forum</a></li>
            <li><a href="contact.php" title="Link 5">Contact</a></li>
        </ul>
</div>


</div>

</div>

</body>

</html>

zondag 17 mei 2009 14:41

Acties:

0 Henk 'm!

Knaak

It's me, Mario!

Gebruik even de code tags

zo is het niet te lezen.

zondag 17 mei 2009 15:39

Acties:

0 Henk 'm!

Mastasidaz

Topicstarter

Done

[ Voor 7% gewijzigd door Mastasidaz op 17-05-2009 15:40 ]

zondag 17 mei 2009 15:50

Acties:

0 Henk 'm!

Tommasso

ik snap je vraag niet echt goed, je wilt de div .pic dynamisch (met procent) laten groeien en ook laten centreren?

je site is statish width (800px) dus waarom wil je onderdelen dynamisch laten meegroeien als de site dat neit doet.

een current moet je met PHP of javascript laten doen, dit kan HTML/CSS niet

(volgens mij zit ergens ook een bug in je HTML source. Firebug doet bij mij iig raar

)

mss kan je ook nog de code highlighten: code=html en dan met haakjes

zondag 17 mei 2009 15:55

Acties:

0 Henk 'm!

Pkunk

Met een voorbeeld online is het denk ik ook niet nodig zo'n enorme lap code te posten. Probeer eerst alleen het relevante stuk eruit te filteren. Dat helpt je mischien het probleem ook wat beter te begrijpen

Over het centreren: waarom lukt het niet met alleen text-align: center?

Over je menu: dit kan je het beste server-side doen met iets van templating. Heb je die kennis niet dan is het makkelijkste gewoon handmatig een classname te zetten op het menuitem wat je wil highlighten

Hallo met Tim

zondag 17 mei 2009 16:38

Acties:

0 Henk 'm!

Mastasidaz

Topicstarter

Text-align: center; heeft idd geholpen

bedankt. Het enige wat me nu nog steeds niet lukt is de current bij het menu.

[ Voor 3% gewijzigd door Mastasidaz op 17-05-2009 16:39 ]

zondag 17 mei 2009 16:59

Acties:

0 Henk 'm!

Tommasso

met current bedoel je dat de pagina in een bepaalde menu item zit en daardoor die knop een bepaald kleurtje krijgt?:

dat moet in 2 stukken:
- je moet aangeven dat een pagina onder dat knopje valt waardoor deze een speciale class mee krijgt:

HTML:

1
2
3

<li>Home
<li class="current">Huidige
<li>Nog iets anders

Dit kan niet automatisch met HTML/CSS omdat deze niet weet onder welke knop hij valt. Je moet dit of elke pagina handmatig gaan doen of met een script dit laten uitwerken (PHP en javascript)

- je moet die knop speciale opmaak geven waardoor hij er anders uit ziet:
hierbij noem ik een menuknop .MenuItem

Cascading Stylesheet:

.MenuItem{
standaard opmaak
}
.MenuItem .current{
speciale opmaak
}

hopelijk kom je hiermee verder

zondag 17 mei 2009 17:50

Acties:

0 Henk 'm!

Mastasidaz

Topicstarter

Het lukt nog steeds niet helemaal.. heb nu zoals je zei een class="current" aangemaakt in de html

HTML:

1	<li><a href="#1" title="Link 1" class="current">Formula 1</a></li>

vervolgens heb ik bij dit css gedeelte .current toegevoegd omdat in principe het dezelfde eigenschappen moet hebben als de hover.

Cascading Stylesheet:

#menu li a:hover .current {
    color: #FFF;
    background:  url(../img/menu14.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }

Wat doe ik fout?

zondag 17 mei 2009 17:53

Acties:

0 Henk 'm!

Tommasso

Mastasidaz schreef op zondag 17 mei 2009 @ 17:50:
Het lukt nog steeds niet helemaal.. heb nu zoals je zei een class="current" aangemaakt in de html
HTML:
1
<li><a href="#1" title="Link 1" class="current">Formula 1</a></li>
vervolgens heb ik bij dit css gedeelte .current toegevoegd omdat in principe het dezelfde eigenschappen moet hebben als de hover.
Cascading Stylesheet:
1
2
3
4
5
#menu li a:hover .current {
    color: #FFF;
    background:  url(../img/menu14.gif) 0 -32px;
    padding: 8px 0 0 10px;
    } 
Wat doe ik fout?

je hebt a:hover, dus is de current alleen van toepassing wanneer je met de muis boven het huidige item hangt

. dus a:hover moet gewoon a zijn

als je zowel bij a:hover en .current hetzelfde moet hebben moet je een komma gebruiken:

Cascading Stylesheet:

#menu li a:hover,
#menu li a.current {
    color: #FFF;
    background:  url(../img/menu14.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }

[ Voor 14% gewijzigd door Tommasso op 17-05-2009 17:57 ]

zondag 17 mei 2009 17:58

Acties:

0 Henk 'm!

Mastasidaz

Topicstarter

Op het moment dat ik a:hover vervang door alleen a, dan werkt de hover niet meer. Dan blijven de vlakken grijs als ik er met mijn muis overheen ga.

zondag 17 mei 2009 18:06

Acties:

0 Henk 'm!

Tommasso

je wilt dus zowel de hover als de current defineren in het zelfde statement. dan moet je deze code doen:

Cascading Stylesheet:

#menu li a:hover,
#menu li a.current{
    color: #FFF;
    background:  url(../img/menu14.gif) 0 -32px;
    padding: 8px 0 0 10px;
}

ik had je post niet goed gelezen, dacht dat je alleen de current wilde defineren, dan moet je namelijk geeh :hover hebben

zondag 17 mei 2009 18:14

Acties:

0 Henk 'm!

Mastasidaz

Topicstarter

Het werkt nu! Thanks

Nog een klein vraagje ik krijg hier een fout in de validator:

HTML:

1	<a href="images/opelastra1.jpg" rel="lightbox[opelastra]" title="New Opel Astra"><img src="thumb/opelastra1.jpg" alt=""></a>

end tag for "img" omitted, but OMITTAG NO was specified

Hoe is dit op te lossen?

zondag 17 mei 2009 18:15

Acties:

0 Henk 'm!

MoietyMe

zij/haar

HTML:

1	<a href="images/opelastra1.jpg" rel="lightbox[opelastra]" title="New Opel Astra"><img src="thumb/opelastra1.jpg" alt="" /></a>

Je sluit je img-tag niet af.

[ Voor 10% gewijzigd door MoietyMe op 17-05-2009 18:15 ]

zondag 17 mei 2009 18:16

Acties:

0 Henk 'm!

Mastasidaz

Topicstarter

Super snelle reactie

Bedankt.

[ Voor 9% gewijzigd door Mastasidaz op 17-05-2009 18:17 ]

zondag 17 mei 2009 21:26

Acties:

0 Henk 'm!

Raynman

Good Fella schreef op zondag 17 mei 2009 @ 18:15:
HTML:
1
<a href="images/opelastra1.jpg" rel="lightbox[opelastra]" title="New Opel Astra"><img src="thumb/opelastra1.jpg" alt="" /></a>
Je sluit je img-tag niet af.

Dat zegt de foutmelding inderdaad, maar dat hoeft helemaal niet, tenzij je een goede reden hebt om XHTML te gebruiken. Je verstuurt nu XHTML Transitional als text/html. Als je het alleen doet om hip te zijn of omdat je denkt dat XHTML beter of nieuwer is, zoek dan eens wat topics over XHTML. Genoeg te vinden hier op GoT maar ook elders.