Just nu i M3-nätverket
Gå till innehåll

Får inte menyn i jämnhöjd


cybertears

Rekommendera Poster

Hej!

 

Jag får inte min meny i jämnhöjd med det oranga 

 

sen vet jag inte hur jag ska göra för att få min text i min meny centrerad

 

Vad har jag gjort för fel?

 

är det något jag har glömt i css filen som borde finnas?

 

är nybörjare på det här, så alla tips på optimering och förbättring tar jag mer än gärna emot.

 

min html kod:

<html>

<head>

<title>Hemsida</title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<header id="header">
<h1>
<center>
Välkommen till Jesses värdelösa sida!
<center>
</h1>
</header>

<body>

			
<ul id="navigation">			
<li><a href="#">Hem</a></li>
<li><a href="#">Om</a></li>
<li><a href="#">Tjänster</a></li>
<li><a href="#">Medarbetare</a></li>
<li><a href="#">Portfölj</a></li>
<li><a href="#">Kontakta oss</a></li>
</ul>	
</div>

<hr>
<div id="footer">
Copyright © Jesse 2014
</div>
</hr>
</body>
</html> 

min css kod:

body{
margin: 0;
padding: 0;
font: 90% arial, helvetica, sans-serif;
background: #387A9B;
color: #333;
}

h1
{

}

h2, h3 { margin-top: 0; }

#header{              /*Den gula saken*/
background: D36832;
padding: 3px;
}


ul#navigation
{
padding-left: 0;
margin-left: 0;
list-style-type: none;
background: #036;
float: left;
width: 100%;
}
		
ul#navigation li 
{ 
display: inline; 
}
		
ul#navigation li a
{
display: block;
float: left;
padding: 0.3em 2em;
text-decoration: none;
background: #036;
color: #fff;
border-right: 1px solid #fff;
}
		
ul#navigation li a:hover
{
color: #000;
background: #69C;
}

#footer{
clear: both;
background: #387A9B;
color: #fff;
padding: 5px 3%;
margin-top:20px;
position: relative;
text-align: center;
font-size: 80%;
}
Länk till kommentar
Dela på andra webbplatser

  • 3 veckor senare...
cybertears

Ändrat lite men får fortfarande inte min meny i jämnhöjd med det orangea.

 

Hela koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Lektion 21 - figur 12</title>
<style type="text/css" media="screen">
	body
	{
		margin: 0;
		padding: 0;
		font: 90% arial, helvetica, sans-serif;
		background: #387A9B;
		color: #333;
	}
	h1
	{
		background: #D36832;
		color: #FFF;
		margin: 0;
		padding: .5em 3%;
		border-bottom: 5px solid #387A9B;
	}
	h2, h3 { margin-top: 0; }
	#container { background: url(back01.gif) repeat-y 50% 0; }
	#container2 { background: url(back02.gif) repeat-y 80% 0; }
	
	ul#navigation
		{
			padding-left: 0;
			margin-left: 0;
			list-style-type: none;
			background: #036;
			float: left;
			width: 100%;
		}
		
		ul#navigation li { display: inline; }
		
		ul#navigation li a
		{
			display: block;
			float: left;
			padding: 0.5em 1em;
			text-decoration: none;
			text-align: center;
			background: #036;
			color: #fff;
			border-right: 2px solid #fff;
		}
		
		ul#navigation li a:hover
		{
			color: #000;
			background: #69C;
		}
	
	#footer
	{
		clear: both;
		background: #387A9B;
		color: #fff;
		padding: 5px 3%;
		text-align: center;
		font-size: 80%;
	}
</style>
</head>
<body>
<h1>
	Jesse´s Webbplats
</h1>        

<ul id="navigation">
	<li><a href="#">Hem</a></li>
	<li><a href="#">Om</a></li>
	<li><a href="#">Tjänster</a></li>
	<li><a href="#">Medarbetare</a></li>
	<li><a href="#">Portfölj</a></li>
	<li><a href="#">Kontakt</a></li>
</ul>		
		</div>
		<div id="footer">
			Copyright © Webbplatsen 2006
		</div>
</body>
</html>

Vet inte om allt är rätt 

Länk till kommentar
Dela på andra webbplatser

Vad menar du med jämnhöjd?

Utan mellanrum?

Isf tar du bort border-bottom på rubriken och sätter margin:0 på navigationen

Länk till kommentar
Dela på andra webbplatser

Datornörd_1994

Vad menar du med jämnhöjd?

Utan mellanrum?

 

Isf tar du bort border-bottom på rubriken och sätter margin:0 på navigationen

Det var en bra hjälp :) 

Länk till kommentar
Dela på andra webbplatser

cybertears

Precis så, Tack så mycket, en sista fråga bara, om man ska styra upp med CSS, hur gör jag så att flikarna (listan för typ Hem o.s.v) centrerat? :)

Länk till kommentar
Dela på andra webbplatser

cybertears

Jag löste det såhär:

ul#navigation
{
padding-left: 0;
margin: 0;
list-style-type: none;
background: #036;
float: left;
width: 100%;
text-align: center;
list-style-position: inside;
}
		
ul#navigation li { 
display:inline-block;
list-style:none;
}
		
ul#navigation li a
{
display: block;
float: left;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
background: #036;
color: #fff;
border-right: 2px solid #fff;
}
		
ul#navigation li a:hover
{
color: #000;
background: #69C;
}

Länk till kommentar
Dela på andra webbplatser

cybertears

Jag har ändrat lite på sidan, och har en lista som ska bli listor

 

jag vill ha en till höger, en centrerad och en till vänster, någon som vet hur man styr upp det på bästa sätt?

 

Listan som jag har nu:

<UL>
<li>
<li><h4><a href="https://registerhack.se/gui.html">Registerhack</a></h4>
<li><h4><a href="http://www.systemlookup.com/">Systemlookup.com</a></h4>
<li><h4><a href="https://www.virustotal.com">Virustotal.com</a></h4>
</UL>
Länk till kommentar
Dela på andra webbplatser

Först; att ha rubriker i din listan känns inte sematiskt korrekt. Du kan ju styra utseendet på en specifik lista genom att sätta ett klassnamn på den och styla därefter. Så hade iaf jag gjort det.

 

Sedan förstår jag inte hur du menar med centrerad lista. Syftar du på text-align eller menar du att ha texterna i kolumner?

Länk till kommentar
Dela på andra webbplatser

Först; att ha rubriker i din listan känns inte sematiskt korrekt. Du kan ju styra utseendet på en specifik lista genom att sätta ett klassnamn på den och styla därefter. Så hade iaf jag gjort det.

 

Sedan förstår jag inte hur du menar med centrerad lista. Syftar du på text-align eller menar du att ha texterna i kolumner?

använder jag div då?

 

t.e.x div class="lista1"> ? eller är jag helt ute och cyklar?

 

jo typ såhär hade jag tänkt med listorna (observera att det är en snabb redigerad bild på ett ungefär hur jag vill ha det) 

 

min sida hur den ser ut idag: post-124092-0-31388100-1394446728_thumb.png

 

så här vill jag på ett ungefär att det ska se ut (endast en omgjord bild) :post-124092-0-76308200-1394446781_thumb.png

 

Detta är endast en sida för mig, men vill ändå får det snyggt med listorna o.s.v

Länk till kommentar
Dela på andra webbplatser

Finns olika metoder att ta till.

 

Enklast är tabell (men latast)

<table style="width:100%" >
		<tr>
			<td style="width:33.3%">
				<ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul>
			</td>
			<td style="width:33.3%">
				<ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul></td>
			<td style="width:33.3%">
				<ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul></td>
		</tr>
		</table>

Annars en enkel grid

<div class="grid">
		  <div class="col-1-3">
			 <ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul>
		  </div>
		  <div class="col-1-3">
			 <ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul>
		  </div>
		  <div class="col-1-3">
			 <ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul>
		  </div>
		</div>

Med denna css

		.col-2-3 {
			width: 66.66%; float:left;
		}
		.col-1-3 {
		  width: 33.33%; float:left;
		}

		.grid:after {
			content: "";
			display: table;
			clear: both;
		}
Länk till kommentar
Dela på andra webbplatser

 

Finns olika metoder att ta till.

 

Enklast är tabell (men latast)

<table style="width:100%" >
		<tr>
			<td style="width:33.3%">
				<ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul>
			</td>
			<td style="width:33.3%">
				<ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul></td>
			<td style="width:33.3%">
				<ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul></td>
		</tr>
		</table>

Annars en enkel grid

<div class="grid">
		  <div class="col-1-3">
			 <ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul>
		  </div>
		  <div class="col-1-3">
			 <ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul>
		  </div>
		  <div class="col-1-3">
			 <ul>
					<li><a href="#">länk 1</a></li>
					<li><a href="#">länk 2</a></li>
					<li><a href="#">länk 3</a></li>
					<li><a href="#">länk 4</a></li>
					<li><a href="#">länk 5</a></li>
					<li><a href="#">länk 6</a></li>
				</ul>
		  </div>
		</div>

Med denna css

		.col-2-3 {
			width: 66.66%; float:left;
		}
		.col-1-3 {
		  width: 33.33%; float:left;
		}

		.grid:after {
			content: "";
			display: table;
			clear: both;
		}

Tack så mycket :)

Länk till kommentar
Dela på andra webbplatser

Om man ska vara lite petig så vill jag få lista nummer ett under fliken google

 

lista nummer två under fliken youtube och den tredje bredvid avrapportering SVDR var ändrar jag det någonstans?

 

Ändrar jag siffrorna vid width: 33.33%; i css biten så åker bara tredje listan ner :(

Länk till kommentar
Dela på andra webbplatser

En rubrik menar du?
Lägg till det innan divven med grid.

 

Du har inte funderat över att köpa en bok om HTML och CSS där alla grundläggande saker du frågar om, står?

Länk till kommentar
Dela på andra webbplatser

En rubrik menar du?

Lägg till det innan divven med grid.

 

Du har inte funderat över att köpa en bok om HTML och CSS där alla grundläggande saker du frågar om, står?

får nog göra det, nä inte rubriken, om du kollar på min första bild så förstår du va jag menade

Länk till kommentar
Dela på andra webbplatser

Jag ser en rubrik ovanför listorna (dvs "Länkar" är en rubrik").

jo det är ifs sant, att jag har en rubrik nu när jag kolla på bilden.

 

omgjord bild i paint, såhär planerar jag att det ska se ut, frågan är var man ändrar för att få det såhär: post-124092-0-06919500-1394618871_thumb.png

Länk till kommentar
Dela på andra webbplatser

lägg allt innehåll mellan navigationen (efter) till footern (före) inom

<div id="main-container">
...
</div>

och ändra befintlig css-klasser:

.col-1-3 {
 width: 33.33%; float:left;
 background-color:#fff; /* bara för att visa vart gränserna går */
}
.grid{}
.grid:after {
content: "";
display: table;
clear: both;
}

/* container läggs in som sätter en bredd på 960px och centrerar innehållet */
#main-container{width:960px;margin:0 auto;}

om du vill labba med indragen till listan kan du testa med

.grid ul li{margin-left:30px}
Länk till kommentar
Dela på andra webbplatser

Ingen speciell. 

Din kurslitteratur då? (du verkar gå någon utbildningen då du genomför lessons?)

Annars w3schools, eller googla på "html css" så finns en del information.

Länk till kommentar
Dela på andra webbplatser

Det var en exempel fil jag tog från nätet

 

jag går el och energiprogrammet inriktning datorteknik, och har nyss börjat läsa webbutveckling 1:)

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...