Kan skita i färgen tills visare.
Kom på att jag faktiskt inte har något #footer. Kör den relative som #header.
Sen är det väl dags skapa sidorna och lägga in text och bild.
Problem med en topframe
161 svar · 13 162 visningar · startad av Kalle M · sida 8 av 9
Du kör inte relative om du inte behöver det för dess barn (om du kör någon annan position än static).
Du kör inte relative om du inte behöver det för dess barn (om du kör någon annan position än static).
I mitt fall tycker du det verkar vettigast lägga #footer relative eller statisk?
Förresten: Ska försöka göra koden finare. En del moment är gjorda för längesedan och därför. Skulle vara kul om få till det där för då kan jag lägga in texter och bild därefter. Tror att det är det som är kvar (Förutom scriptet). Sen är det väl kolla kolla så det funkar i flesta webbläsare och in med metataggar och hos sökmotorer.
I mitt fall tycker du det verkar vettigast lägga #footer relative eller statisk?
Varför? Nu vet jag inte vad du har i footern, men om du inte kör några position inne i #footer så finns det absolut INGEN anledning att köra en position relative (och för övrigt så är alla element position: static by default).
Förresten: Ska försöka göra koden finare. En del moment är gjorda för längesedan och därför. Skulle vara kul om få till det där för då kan jag lägga in texter och bild därefter. Tror att det är det som är kvar (Förutom scriptet). Sen är det väl kolla kolla så det funkar i flesta webbläsare och in med metataggar och hos sökmotorer.
Det viktigaste är ju att du ha en semantiskt korrekt HTML struktur som är något en människa skulle kunna förstå sig på för att underlätta för sökmotorer.
Varför? Nu vet jag inte vad du har i footern, men om du inte kör några position inne i #footer så finns det absolut INGEN anledning att köra en position relative (och för övrigt så är alla element position: static by default).
Det viktigaste är ju att du ha en semantiskt korrekt HTML struktur som är något en människa skulle kunna förstå sig på för att underlätta för sökmotorer.
HAr rensat bort det du skrev i förra tråden.
behöver en röd rubrik som är lika stor som stycketexten men ska vara fet eller strong och den röda färgen.
I CSSmallen:
h4{
color:#933;
font-size:11px;
Jag tror jag en gång fått bort avståndet mellan rubriken och texten men glömt. Jag vill att det ska vara en <br> imellan bara om man säger så. Ska prova padding och margin 0
voigtann1
Jag är verkligen jätteglad och tacksam du hjälper mig. Tackar dig. Kul få in text och bild. Sen gäller det att folk ska hitta sidan så småningom också(Metataggar mm). E nog bra skippa javascripten. Jag skapar en sida med alla kurser och lägger alla kursinnehåll på olika sidor och sen är väl tanken att det ska finnas en länk "Boka" vid innehållet och man kan boka sig. E väl det som är målet på sikt.
I den mallen jag gjort gillar jag inte följande:
I mitten är det alltid text. Till vänster är det ibland text och ibland bild. I högra kommer jag lägga in bild och ibland text.
Om jag lägger in en bild i vänstra så linjerar inte toppen på bilden med rubrikens top i mittendelen om du förstår. Jag vill att det ska linjera hela vägen och jag tycker det borde göra det. Kommer det in en bild gör den inte det.
Jag skapade ett id för bilden och talade om margintop till 2 px och satte margin top-2 på H4( i min CSS). Det ser ok ut men det känns rätt jobbigt sitta göra detta på varje bild framöver :-). Jag har massa kod på sidan och V-align top verkar göra så det börjar i top och det vill jag helst ha bort ifrån sidan och lägga i min css-mall.
Se bifogad bild hur jag menar.
Om du kollar bifogad bild med namnet "Testsida" så ser du också. Jag kanske har smaken som baken men jag tycker faktiskt sidan är skitsnygg! :-)
Tackvare din fina hjälp! Ska fixa avståndet mellan länkarna i Head så det är samma avstånd också. Skulle vara roligt om jag kunde få till så rubrik och bild linjerar utan fuska med koden för jag gillar verkligen layouten. La in några av bilderna jag tänkte köpa också. Blir nåt annat man får fyllt på lite.
Tack på förhand!
Hur lägger jag som sagt in i min CSS så allt linjerar så jag slipper ha det på sidan?
Den alignar ju, du har ju en rubrik som trycker ner din text, eller vad menar du?
Och nu känns det som du missbrukar IDn i din HTML, ett ID får bara uppkomma en gång på sidan.
men om du ha en margin-top: 2px på dina h4 så få du ju sätta en margin-top på dina img också.
Den alignar ju, du har ju en rubrik som trycker ner din text, eller vad menar du?
Och nu känns det som du missbrukar IDn i din HTML, ett ID får bara uppkomma en gång på sidan.
men om du ha en margin-top: 2px på dina h4 så få du ju sätta en margin-top på dina img också.
Jo det linjerar nu men det är väl för att jag har fuskat på sidan.
Min sida har följande kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>mallsida</title>
<link href="css1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="heldiv">
<div id="header"> <img src="images/magwill3.gif" alt="MAGWILL">
<hr>
<div id="kontakt">
<p><strong>MAGWILL</strong><br>
sdsdfsdf<br>
sadfsadfsdf
<br>
</p>
<p><a href="mailto:Info@magwill.se">Info@magwill.se</a><a href="kontakt.htm"></a></p>
</div>
<table width="730" border="0">
<tr>
<td width="59"><a href="default.html">Hem</a></td>
<td width="110"><a href="utbildning.html">Utbildningar</a></td>
<td width="118"><a href="konsulttjanster.html">Konsultjänster</a></td>
<td width="98"><a href="kursernysidmall.html">Om oss</a></td>
<td width="138"><a href="kontakt.htm">Arbeta med oss</a></td>
<td width="90"><a href="kontakt.htm">Kontakta oss</a></td>
<td width="87"> </td>
</tr>
</table>
</div>
<table width="790" border="0" cellpadding="10" cellspacing="10">
<!--DWLayoutTable-->
<tr>
<td width="158" height="488" valign="top" id="kursdiv"><h4>ökljöklj</h4>
<p>kjlkjlkj klöj lköjcv zlxöckv xöclkvjz xöclvkjzx cölvkjzx cövlkzjx cvölkzjxc völzkxcv zölxkcv zlöxckjv zxölckv</p>
<p> </p>
<p>zxclkvj zxöclkvjzxöclkvjz xöclvkjzx cölvkjzx cölvkxzjcvö kljlöl</p>
<p> </p>
<p>ölk äökl äökl </p>
<p> </p>
<p>ölk äökl äökl äökl </p>
<p><img src="test2.jpg" width="158" height="198"></p></td>
<td width="374" valign="top"0><h4>ölkölklö</h4>
<p>kdjasödfkj sdölkfajs döflakjsd flöaksdjf alöskdf asldkfja sdlöfkajs dflökasjd falöksdjf slökdf södlkfja sdlfkajsd faklösdjf alskdfja sdlkfja sdlöfkaj sdflkajs dfa</p>
<p>asdkfja sldkfj </p>
<p> </p>
<p>asdlfa sädfkl asädlöfk asfkla sdäflöka sdäfkls daflöksd fasklöd fasdklf asdlökf aäsdk asödlfk asdflök asödlfk asdflöka sdäfkl sdf</p></td>
<td width="158" align="left" valign="top"><h4><img src="testare.jpg" width="157" height="236"></h4>
<p> </p>
<p> </p>
<p> </p></td>
</tr>
</table>
<div id="foot">MAGWILL Lär för framtiden, <a href="mailto:Info@magwill.se">Info@magwill.se</a>, 0703201742</div>
<p> </p>
</div>
</body>
</html>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
margin-top: 0px;
margin-left: 0px;
}
table {
font-size: 11px;
}
h3 {
color: #933;
font-size: 14px;
margin:0px
padding:0px;
margin-bottom: 0px;
}
p {
margin: 0px;
}
h4 {
color: #933;
font-size: 11px;
margin:0px
padding:0px;
margin-bottom: 0px;
margin-top: -1px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
font-weight: normal;
color: #933;
}
#header {
position:relative;
background: #000;
height: 98px;
width: 735px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
}
#kontakt {
color: #FFF;
position: absolute;
width: 120px;
left: 623px;
top: 13px;
font-family: Verdana, Geneva, sans-serif;
border: thin none #FFF;
text-align: right;
font-size:11px;
}
#header a {
color: #fff; /*Vit*/
font-size: 13px;
}
#header a:hover { color: #ccc;/* ljus grå*/ }
#kontakt a {
color:#fff;
font-size:11px;
}
#heldiv{
Width:790px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#foot {
position:static;
background: #fff;
height: 17px;
width: 789px;
text-align: center;
margin: 0px;
padding: 0px;
color: #933;
font-weight: normal;
}
Det linjerar som sagt nu men det är väl för att jag fuskat till det på sidan.
Varför nollar du margin på p elementet, räcker ju att du nollar den på toppen. Du skall inte skapa element som du inte använder. Sen din #foot fattar jag inte varför du ha en position: static, alla element är static som default och du skriver aldrig över #foot att vara någon annan position, sen bakgrunden, hela din sajt är väl vit, så varför har du en bakgrundsfärg på den?
Varför nollar du margin på p elementet, räcker ju att du nollar den på toppen. Du skall inte skapa element som du inte använder. Sen din #foot fattar jag inte varför du ha en position: static, alla element är static som default och du skriver aldrig över #foot att vara någon annan position, sen bakgrunden, hela din sajt är väl vit, så varför har du en bakgrundsfärg på den?
Ok nu ser den ut
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
margin-top: 0px;
margin-left: 0px;
}
table {
font-size: 11px;
}
h3 {
color: #933;
font-size: 14px;
margin:0px
padding:0px;
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
h4 {
color: #933;
font-size: 11px;
margin:0px
padding:0px;
margin-bottom: 0px;
margin-top: -1px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
font-weight: normal;
color: #933;
}
#header {
position:relative;
background: #000;
height: 98px;
width: 735px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
}
#kontakt {
color: #FFF;
position: absolute;
width: 120px;
left: 623px;
top: 13px;
font-family: Verdana, Geneva, sans-serif;
border: thin none #FFF;
text-align: right;
font-size:11px;
}
#header a {
color: #fff; /*Vit*/
font-size: 13px;
}
#header a:hover { color: #ccc;/* ljus grå*/ }
#kontakt a {
color:#fff;
font-size:11px;
}
#heldiv{
Width:790px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#foot {
height: 17px;
width: 789px;
text-align: center;
margin: 0px;
padding: 0px;
color: #933;
font-weight: normal;
}
Tänkte som sagt börja lägga in text och bild på sidan men innan:
1.Den linjerar som sagt nu (align top.). Men detta verkar jag gjort på sidan i html-koden. (Se min htmlkod).
Tänkte om det är snyggare ha det i CSS-mallen. Se koden för tabellen på sidan där det står V-align top. Eller är det ok göra justeringen på sidan istället som jag gjort?
2. Sen undrar jag om jag ska sätta en höjd på tabellen eller om den ska bli högre höjd allt eftersom jag skriver. Tänker på "foot". Om jag exempelvis skriver väldigt lite text så foot syns utan scrolla eller om jag ska sätta höjd på tabellen. Förstår du vad jag menar?
3. Ska jag lägga in metataggar på sidan eller ska jag göra det på varje sida sedan?
1. du kan ju köra vertical-align på td i CSS?
2. Vilka meta taggar pratar du om? Den ända som har någon vikt är description, men om du har samma innehåll där som i ditt content så behöver du nog inte bry dig om det ens.
1. du kan ju köra vertical-align på td i CSS?
2. Vilka meta taggar pratar du om? Den ända som har någon vikt är description, men om du har samma innehåll där som i ditt content så behöver du nog inte bry dig om det ens.
Ja det är väl något man ska skriva in mellan taggarna? kurs,utbildning mm. Eller ska jag skita helt i det? Tänkte ifall jag ska lägga in det på sidan så jag slipper göra det på alla sedan. Kanske missförstått men det är väl några ord man brukar lägga in i koden så den ska hittas?
Angående foot. Kolla bifogad bild. Ska footers placering där nere vara beroende på hur mkt jag skriver? Nu har jag exempelvvis lite text.
Blir galen.
Jag har lagt in td vertikal top. Funkar ej.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
margin-top: 0px;
margin-left: 0px;
}
table {
font-size: 11px;
}
h3 {
color: #933;
font-size: 14px;
margin:0px
padding:0px;
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
h4 {
color: #933;
font-size: 11px;
margin:0px
padding:0px;
margin-bottom: 0px;
margin-top: -1px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
font-weight: normal;
color: #933;
}
#header {
position:relative;
background: #000;
height: 98px;
width: 730px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
}
#kontakt {
color: #FFF;
position: absolute;
width: 120px;
left: 623px;
top: 13px;
font-family: Verdana, Geneva, sans-serif;
border: thin none #FFF;
text-align: right;
font-size:11px;
height: 69px;
}
#header a {
color: #fff; /*Vit*/
font-size: 13px;
}
#header a:hover { color: #ccc;/* ljus grå*/ }
#kontakt a {
color:#fff;
font-size:11px;
}
#heldiv{
Width:790px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#foot {
height: 17px;
width: 789px;
text-align: center;
margin: 0px;
padding: 0px;
color: #933;
font-weight: normal;
}
#td{vertical-align:top;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>mallsida</title>
<link href="css1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="heldiv">
<div id="header"> <img src="images/magwill3.gif" alt="MAGWILL">
<hr>
<div id="kontakt"><strong>MAGWILL</strong><br>
fsdfsadfsd<br>
<a href="kontakt.htm">Info@magwill.se </a></div>
<table width="730" border="0">
<tr>
<td width="59"><a href="default.html">Hem</a></td>
<td width="110"><a href="utbildning.html">Utbildningar</a></td>
<td width="118"><a href="konsulttjanster.html">Konsultjänster</a></td>
<td width="98"><a href="kursernysidmall.html">Om oss</a></td>
<td width="138"><a href="kontakt.htm">Arbeta med oss</a></td>
<td width="90"><a href="kontakt.htm">Kontakta oss</a></td>
<td width="87"> </td>
</tr>
</table>
</div>
<table width="790" border="0" cellpadding="10" cellspacing="10">
<!--DWLayoutTable-->
<tr>
<td width="158" height="120"><h4>ökljöklj</h4>
<p>kjlkjlkj klöj lköjcv zlxöckv xöclkvjz xöclvkjzx cölvkjzx cövlkzjx cvölkzjxc völzkxcv zölxkcv zlöxckjv zxölckv </p>
<p>zxclkvj zxöclkvjzxöclkvjz xöclvkjzx cölvkjzx cölvkxzjcvö kljlöl ölk äökl äökl <br>
ölk äökl äökl äökl </p></td>
<td width="374"><h4>ölkölklö</h4>
<p>kdjasödfkj sdölkfajs döflakjsd flöaksdjf alöskdf asldkfja sdlöfkajs dflökasjd falöksdjf slökdf södlkfja sdlfkajsd faklösdjf alskdfja sdlkfja sdlöfkaj sdflkajs dfa</p>
<p>asdkfja sldkfj </p>
<p>asdlfa sädfkl asädlöfk asfkla sdäflöka sdäfkls daflöksd fasklöd fasdklf asdlökf aäsdk asödlfk asdflök asödlfk asdflöka sdäfkl sdf</p></td>
<td width="158"><h4><img src="testare.jpg" width="157" height="236"></h4>
<p> </p></td>
</tr>
</table>
<div id="foot">MAGWILL Lär för framtiden, <a href="mailto:Info@magwill.se">Info@magwill.se</a>, 6345</div>
<p> </p>
</div>
</body>
</html>
Annars får jag väl skippa lägga det i css-mallen.
Efter dessa funderingar så borde jag ju kunna börja skapa sidor:
1. Det är väl bäst footer är på en fast plats eller? Ska jag sätta höjd på tabellen eller hur går jag till väga?
Om man på nån sida har väldigt lite text hur bör den likson ligga?
Vet ej om det är så snyggt ha det som bifogad bild. Är snyggast footer är längst ner vid kanten på fönstret Eller vad tycker du?
2. Jag verkar inte få till det med td-align? Vad är galet? I värsta fall får jag väl ha justeringen i html-koden som jag har nu.
3. Ska jag lägga in nån form av description på sidan?
Blir galen.
Jag har lagt in td vertikal top. Funkar ej.
#td{vertical-align:top; }Annars får jag väl skippa lägga det i css-mallen.
Det har du ju inte gjort, du har sagt att elementet med ett ID td så skall den vara vertical-align: top, du skall ha td INTE #td Men detta kommer påverka alla td på din sida.
Min funderingar innan jag lägger in text och bilder är som sagt:
1. Ska footer vara på fast plats eller ska den vara längre ner desto mer text som finns på sidan? Ska jag sätta höjd på tabellen eller ska jag ha det så som bifogad bild visas? Om jag ska sätta höjd. Finns det nån höjd som är vettig? Är snyggast footer är längst ner vid kanten på fönstret och att den syns hela tiden där. Eller vad tycker du?
2. Jag verkar inte få till det med td-align? Vad är galet?
3. Nu när jag tänker på det i efterhand borde jag ju skapat nån form av id för tabellen i CSS-mallen och lagt in bredd,höjd och allt där. Är det möjligt?
Blir det för mkt jobb kring det där så får jag väl skita i det. E om du vill hjälpa mig isåfall.3. Ska jag lägga in nån form av description på sidan?
1. Få du väl bestämma själv det är betydligt svårare än vad du har kunskaper till och jag har tid att berätta hur man gör, så skit i det
2. Se tidigare svar
3. Varför skall du ha en fast bredd, höjd? Du har ju inte ett fast innehåll, bredden sätter du till 100% av dess förälder så har du ju redan det på din #helasida eller vad du namnge dina ID till.
4. Upp till dig själv.
1. Få du väl bestämma själv det är betydligt svårare än vad du har kunskaper till och jag har tid att berätta hur man gör, så skit i det
2. Se tidigare svar
3. Varför skall du ha en fast bredd, höjd? Du har ju inte ett fast innehåll, bredden sätter du till 100% av dess förälder så har du ju redan det på din #helasida eller vad du namnge dina ID till.
4. Upp till dig själv.
Ok. Då lägger jag alltså isåfall in beskrivning på varje sida när jag skapat alla mina sidor?