"welcome" fane problem

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
skills jokes
Nørd
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;
				}

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg: 1528
Tilmeldt: 28. dec 2010, 10:49

Re: "welcome" fane problem

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
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: "welcome" fane problem

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 ;)

Besvar