11 svar · 461 visningar · startad av logitech
Hej! Jag brukar göra hemsidor till mina kompisar och till mig själv men varje gång jag gjort klart min hemsida och slicat klart den. Så har jag problem. Jag kan inte få "text rutorna" att vara flexibla utan att hela sidan förstörs. Jag har hört att man kan använda sig av tabeller och bygga upp hela sidan igen. Men hur gör man? Kan inte så mycket om att bygga upp med tabeller.
Använd bara tabeller om du verkligen inte kan lösa det på annat sätt, se tabeller som en nödlösning!
Plugga istället på lite om css och hur man placerar objekt på olika sätt.
Däremot så brukar jag tänka hemsidan som ett rutmönster och slica bilderna därefter.
Och slica inte ihjäl dig, ju större bilder du har ju enklare är det att placera dem på sidan! :)
Dagens tips!
Tre mycket användbara taggar är: Display, Float och Clear, läs på om dessa så är du en bra bit på väg! :)
http://www.devguru.com/Technologies/css/quickref/css_index.html
Men vart kan jag lära mig CSS? Hoppas bara det inte tar tid att lära sig det heller :P
goggelito - vad är display, float och clear-taggar för någonting? Html? Css = egenskaper eller "properties".
Det går ut på att man först bygger upp html-koden och sedan lägger in de bilder som man vill ha som bakgrundsbilder. Hela sidan är uppbyggd av en massa block och dessa sträcker sig nedåt när man lägger till text.
Dina kanter som ska gå hela vägen ned lägger du som bakgrund till body eller html elementen. Headern lägger du som bakgrund till id="header". Sedan så lägger du in materialet. Ska du ha mer än en kolumn så använder du "float" egenskapen i CSS tillsammans med en "width"-egenskapen. float:right på högra kolumnen och "float:left" på vänstra, samt en bredd på båda. Titta inte på sidan i IE när du lär dig CSS - IE suger.
Här är en sida du kan utgå från - jag har inte floatat både content och menyn (menuLeft) utan bara lagt en marginal på content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document to show someone xhtml</title>
<style type="text/css" media="all">
html, body {
margin: 0; padding: 0; height: 100%; /* i strict mode så är
html och body inte 100% höga */
}
#wrapper, #footer {
width: 600px; /* bredden */
margin: 0 auto; /* centrera */
}
#wrapper {
border: 1px solid black; /* så du kan se var den slutar */
border-bottom: none; /* men ingen längst ner, för då blir det scrollbars */
border-top: none;
min-height: 100%; /* i bra webbläsare betyder det här att den går helva vägen ner */
overflow:auto; /* och det här betyder att den ska få samma längd som de
float-ade blocken i den */
z-index: 10; position: relative; /* den här raden är samma sak som lager i photoshop
och position: relative behövs för att kunna använda z-index. Det är bara om man
lägger till egenskaperna: top, bottom, right, left, som blocket börjar flytta på sig. */
}
/** html #wrapper {
height: 100%;
}*/
#header {
height: 120px;
border-bottom: 1px solid black;
overflow: hidden;
/* STYLING */
color: white;
background-color: #73040D;
}
#header h1 {
margin: 15px 0 10px 15px;
}
#footer {
line-height: 50px; /* vertikal textcentrering */
margin-top: -50px; /* upp med blocket in i wrapper-n */
height: 50px; /* med rätt höjd. */
z-index: 20;position: relative; /* samma anledning som ovan */
/* TEXTEGENSKAPER */
font-weight: bold;
background:black; color: white; /* black on white */
text-align: center;
}
#menuLeft{
float: left; width: 200px;
border-right: 1px solid black; /* alltså är total bredd 201px */
}
* html #menuLeft {
margin: auto -3px;
}
#content {
margin-left: 201px;
padding: 25px;
padding-top: 0; padding-bottom: 0;
}
#menuLeft, #content {
padding-bottom: 50px; /* för att göra plats för footern - lägges detta på wrapper så
kommer paddingen att läggas till 100%-höjden och därmed alltid göra wrapper
50 pixlar för hög. Alternativt så använder man
#wrapper{
-moz-box-sizing: border-box;
box-sizing: border-box;
}
vilket betyder att man i så fall lägger sätter bredden (600px) inte enbart på
"content-box", dvs innehållet i divven, utan även på border samt padding. */
}
/* ////////////// TEXT ////////////// */
body {
font-size: 10pt;
font: 10pt Arial;
}
h1 {
font-family: "Century Gothic";
font-size: 200%;
}
h2 {
font-family:"Century Gothic"; color:#2B0A81;
margin: 15px 0 5px 25px;
font-size: 150%;
}
p {
line-height: 14pt;
margin: 10px 0; /* uppe och nere, sidorna; */
}
code {
font-size: 90%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Testpage</h1>
<p>use [url]http://wd.mrclay.org/tests/ir/[/url] to change background image to your page-title image</p>
</div>
<div id="menuLeft">
<h2>Menu</h2>
</div>
<div id="content">
<h2>En testsida från Henke</h2>
<p>Nu ställer man ju sig frågan om den här sidan fungerar i alla webbläsare - svaret på den frågan är nej - inte riktigt. Jag har använt de enklaste knepen. För att få den att fungera perfekt i internet explorer så skulle det vara nödvändigt att ta bort följande css:</p>
<p><code> * html #wrapper {<br />
height: 100%;<br />
}</code></p>
<p>Vestibulum dapibus pede non risus. Donec at est. Nam in nisl. Suspendisse mattis est in eros. Proin tristique. Duis luctus. Donec sollicitudin posuere tellus. Etiam gravida augue quis erat. Curabitur rhoncus, arcu in faucibus facilisis, est dui pretium diam, sit amet condimentum nulla lacus sed dolor. Nunc lectus. Morbi porttitor mauris eu ligula. Integer scelerisque faucibus diam. Praesent sollicitudin. Sed tincidunt suscipit ligula. Etiam placerat ante nec diam. Curabitur imperdiet dui id leo. Etiam vitae ligula id mi bibendum pretium. Nulla facilisi.</p>
<h2>En till rubrik </h2>
<p>Aenean eleifend semper quam. Ut sed risus. Aenean lorem neque, lobortis eget, accumsan in, tincidunt sed, quam. Sed a neque. Donec non lectus. Vivamus auctor sapien vitae erat. Nullam a urna. Etiam cursus. Integer nunc. Fusce quis nisi. Quisque rutrum sodales justo. Suspendisse potenti. </p>
</div>
</div>
<div id="footer">
Av Henrik Feldt, 2006. </div>
</body>
</html>
Alternativt kan du byta ut detta i koden för att få två floated blocks:
#content {
float: right;
width: 349px;
padding: 25px;
padding-top: 0; padding-bottom: 0;
}
om du vill att även IE ska ha footern längst ned så får du använda ett annat sätta att cleara floatsen. (usch vad jag hatar mig själv för svengelskan)
Om du läser igen den koden så behöver du inte lära dig så mycket mer.
När du sedan lägger in bilderna använder du "background"-egenskapen.
I photoshop kan du trycka CTRL+SHIFT+C för att välja copy merged, så är det bara att klistra in i nytt dokument och spara för webben!
echoSwe skrev:
goggelito
hehe, ja kärt barn har många namn! :)
echoSwe skrev:
vad är display, float och clear-taggar för någonting? Html? Css = egenskaper eller "properties".
sorry, ordvalet va kanske lite tokigt, men söker man på display, float samt clear så finnar man nog vad man söker ändå! ;)
Ladda ner Desktop.rar och bara skriv något i 1 av ramarna. Så kommer ni märka att båda töjs ut ifall 1 får för mycket text i sig och behövs töjas ut.
...
<!-- ImageReady Slices (Untitled-2) --
Det där är lika med nackskott.
Okkido, är det nått jag ska göra vid ImageReady Slices? :s
logitech skrev:
Vad ska det betyda echoSwe :q
Att jag tycker du ska använda en bättre layoutteknik än tabeller.
