Her kan du stille og svare på spørgsmål omkring CSS
-
skills jokes - Nørd
- Indlæg:125
- Tilmeldt:12. sep 2013, 17:03
"welcome" fane problem
Indlæg
af skills jokes » 6. okt 2013, 20:34
hejsa,
jeg har set et par af video guidene og jeg er stødt på et problem,
det er lidt svært at forklare mit problem eller det er lettere bare at lave en video om det:
http://www.youtube.com/watch?v=JwkymQDIupA
html kode:
Kode: Vælg alt
<html>
<head>
<meta charset="utf-8">
<title>php</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<style type="text/css">
</style>
</head>
<body bgcolor="">
<div id="welcome">
<div id="plads"></div>
<div><p class="p"><a class="tekst" href="index.php">welcome</a></p></div>
</div>
<ul id="ulnav">
<li id="linav"> <a href="#" class="nav">hjem</a> </li>
<li id="linav"> <a href="#" class="nav">Om mig</a> </li>
<li id="linav"> <a href="#" class="nav">Kontakt Mig</a> </li>
<li id="linav"> <a href="#" class="nav">Billeder</a> </li>
</ul>
</body>
</html>
css kode:
Kode: Vælg alt
/*-------------------------------"body:"---------------------------------*/
body{
margin:0;
}
/*-------------------------------"welcome/tekst:"---------------------------------*/
#welcome{
width:1920;
height:113;
background-color:orange;
border-bottom:2px solid black;
}
body{
margin:0;
}
div.test{
margin:;
}
p.p{
color:white;
font-size:70;
}
a.tekst{
text-decoration: none;
color:black;
}
/*-------------------------------"navigations-bar:"---------------------------------*/
#ulnav{
list-style-type:none;
width:832px;
}
#linav{
float:left;
}
a.nav:LINK , a.nav:visited{
display:block;
width:200px;
color:white;
background-color:black;
text-align:center;
padding:4;
text-decoration:none;
text-transform:uppercase;
}
a.nav:hover{
background-color:orange;
color:black;
}
-
ThomasI
- Grundlægger
- Indlæg:1528
- Tilmeldt:28. dec 2010, 10:49
Indlæg
af ThomasI » 6. okt 2013, 22:46
Hej med dig!
For at få dit welcome til at centere skal du tilføje dette til din welcome-div:
text-align: center;
Kode: Vælg alt
#welcome{
width:1920;
height:113;
background-color:orange;
border-bottom:2px solid black;
text-align: center;
}
Dette vil då al din tekst i din div til at stå i midsten - måske er det ikke helt som du gerne vil have det?
Med hensyn til din navbar - så ser her:
http://www.nemprogrammering.dk/forum/vi ... ?f=6&t=769
Måske kan det hjælpe dig?
-
cristian - Moderator
- Indlæg:882
- Tilmeldt:26. sep 2011, 21:31
-
Kontakt:
Indlæg
af cristian » 7. okt 2013, 20:39
skills jokes skrev:hejsa,
jeg har set et par af video guidene og jeg er stødt på et problem,
det er lidt svært at forklare mit problem eller det er lettere bare at lave en video om det:
http://www.youtube.com/watch?v=JwkymQDIupA
html kode:
Kode: Vælg alt
<html>
<head>
<meta charset="utf-8">
<title>php</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<style type="text/css">
</style>
</head>
<body bgcolor="">
<div id="welcome">
<div id="plads"></div>
<div><p class="p"><a class="tekst" href="index.php">welcome</a></p></div>
</div>
<ul id="ulnav">
<li id="linav"> <a href="#" class="nav">hjem</a> </li>
<li id="linav"> <a href="#" class="nav">Om mig</a> </li>
<li id="linav"> <a href="#" class="nav">Kontakt Mig</a> </li>
<li id="linav"> <a href="#" class="nav">Billeder</a> </li>
</ul>
</body>
</html>
css kode:
Kode: Vælg alt
/*-------------------------------"body:"---------------------------------*/
body{
margin:0;
}
/*-------------------------------"welcome/tekst:"---------------------------------*/
#welcome{
width:1920;
height:113;
background-color:orange;
border-bottom:2px solid black;
}
body{
margin:0;
}
div.test{
margin:;
}
p.p{
color:white;
font-size:70;
}
a.tekst{
text-decoration: none;
color:black;
}
/*-------------------------------"navigations-bar:"---------------------------------*/
#ulnav{
list-style-type:none;
width:832px;
}
#linav{
float:left;
}
a.nav:LINK , a.nav:visited{
display:block;
width:200px;
color:white;
background-color:black;
text-align:center;
padding:4;
text-decoration:none;
text-transform:uppercase;
}
a.nav:hover{
background-color:orange;
color:black;
}
Prøv at ændre din html til
Kode: Vælg alt
<html>
<head>
<meta charset="utf-8">
<title>php</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
<body>
<div id="siteWrapper">
<!-- dette sætter margin i toppen til 0% højre side til 25% bunden til 0% og venstre side til 25% -->
<div style="margin: 0% 25%;" id="siteWrapperPartial">
<div style="text-align: center;" id="wlecome">
<h1>Velkommen</h1>
</div>
<div style="text-align: center;" id="navigation">
<ul id="ulnav">
<li id="linav"> <a href="#" class="nav">hjem</a> </li>
<li id="linav"> <a href="#" class="nav">Om mig</a> </li>
<li id="linav"> <a href="#" class="nav">Kontakt Mig</a> </li>
<li id="linav"> <a href="#" class="nav">Billeder</a> </li>
</ul>
</div>
</div>
</body>
</html>
text-align: center;
Placere tekst i midten af diven. Man burde også kunne gøre dette for ens menu. Men i min egen menu f.eks. Har jeg problemer med dette.
Fordi selve CSS koden i menuen siger på et tidspunkt
float: left; (har noget med grafikken at gøre)
Hvilket gør at jeg ikke kan bruge overstående metode. Og jeg har ikke fundet en anden måde jeg syntes der er klygtig / smart nok til at gøre opgaven. Men det er også sansynlig at jeg bare overser noget basalt
