html css skapa textruta för text så skapar spalter

Rockelina

Äldre 10 Oct 02:52
8 svar

Visa endast Anmäl

html css skapa textruta för text så skapar spalter

Sitter uppe och övar - men är ny på detta och hittar inte på nätet.
HUR skapar jag snyggt så att texten ligger på två spalter på förstasidan.

Jag vill ha text på vänstra spalten och på den högra kunna lägga in bild och text. Utan att det "flyter".

Jag har ett snyggt foto som header - sedan vill jag ha wrappern i en snygg färg för det lägger sig snyggt under "menyn". Problemet är då att jag måste ju skapa ytterligare en vit textruta som lägger sig ovanpå wrappern. Har provat med containers och SUCK. Hur gör jag i html och css....
- «
- ‹
- Sida 1 av 1
- 1
- ›
- »
Svara i tråden
Svar på tråden html css skapa textruta för text så skapar spalter
sportpappa

Äldre 10 Oct 07:03
#1

Visa endast Anmäl

Den metod man "ska" använda nu för tiden är div:ar.
Jag kommer från den gamla skolan och tycker att tabeller är enklare att förstå, blir oftare rätt och går snabbt att skapa.
Använd alltså helst div:ar, men om det strular så gör en tabell.

Här har du exempel på både div:ar och tabeller:
http://www.w3schools.com/html/html_layout.asp
Rockelina

Äldre 10 Oct 11:32
#2

Visa endast Anmäl

Lyckades skapa ruta - men så ändrades storleken på texten och hur göra jag för att styra textstorleken i de olika div?

Jag vill skapa:
div 1 - h1 som är 960 bred över hela skärmen
div 2 - h2 560 -vänster- texten ska ha amrginal och padding så inte ut i kanterna (är denna text som blivit skum
div 3 - h3 - 400 höger - här vill jag läggain en bild och kickbar "ruta"


Min css för text (bara gjort de första två )ser ut så här:

h1 { text-align:center; padding: 10px;} margin: 20px }
h2, p { padding: 10px;}   margin: 20px   }

html:
<div id="headline" style="background-color:#FFFFFF; height:50px; width:960px; float:center;">
<h1>xxx</h1> </div> <div id="main" style="background-color:#FFFFFF; height:500px; width:560px; float:left;">   <h2>    <p>Quisque a felis quis mauris pellentesque lobortis non sit amet felis. In lacinia sollicitudin ligula, ac hendrerit quam ultrices non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nunc, semper vitae porttitor id, fermentum ac lorem. Nulla in neque sit amet nulla pulvinar adipiscing. Etiam vitae nunc sem, non accumsan nisl. Pellentesque varius, nisl quis rhoncus dignissim, lectus risus pulvinar nunc, eget luctus nisl leo fermentum nibh. Suspendisse potenti. Phasellus vel enim a arcu scelerisque lobortis. Nunc et elementum augue. Etiam interdum ligula id felis cursus rutrum. Aliquam congue luctus tortor, sit amet aliquam lectus tempor eget. Proin ac mi nisi. Fusce luctus leo vel dui ornare lobortis. Nulla ultrices lorem ac libero blandit a varius elit blandit. Aenean et purus sit amet sem pulvinar lobortis.</p>   </h2> </div> <div id="illustration"style="background-color:#FFFFFF; height:500px; width:400px; float:right;">   <h3>Programmet</h3>   <p>Test</p> </div> </div> <div id="footer">
Rockelina

Äldre 10 Oct 11:34
#3

Visa endast Anmäl

sorry INTE tänkt lägga in det där:-0 går inte att läsa!!!

ja ja - orkar nån så snälla hjälp....kan inte fårga lärarna för vi ska ju googla och öva

sabbar bara sidan allt mer - sparar gamla versioner men tar ju en jävla tid som jag inte har....satt uppe till fyra inatt och hade behövt bli klar nån gång...
sportpappa

Äldre 10 Oct 13:09
#4

Visa endast Anmäl

Din css för texten ser lite underlig ut vilket kanske ställer till det. Det är för många måsvingar. Det borde stå:
h1 { text-align:center; padding: 10px; margin: 20px }
h2, p { padding: 10px; margin: 20px }
Tänk på att h1, h2, h3 osv. har sina standard-stilar kvar vilket gör dem lite olämpliga att använda.
Använda hellre klasser i div:ar och lägg stilarna på dem.
Rockelina

Äldre 10 Oct 14:53
#5

Visa endast Anmäl

Tack
Har kommit lite längre - jag kopierar in koderna i word-tabeller så kan jämföra både html och css.

Problemet var att det stod "h" före "p" - tolkade ju det som en rubrik då

Nu är dilemmat att jag har skrivit in så här för att få två spalter men dumma programmet fattar inte att de ska stå bredvid varandra....

<div id="content" style="background-color:#FFFFFF; height:50px; width:960px; float:center;">
                     <h1>rubrik</h1>
</div>

<div id="main" style="background-color:#FFFccc; height:2000px, width:560px; float:left;">
                    <p>text</p>
</div>

<div id="illustration" style="background-color:#FFFFFc; height:2000px; width:400px; float:right;">
                 <h3>rubrik</h3>
                 <p>text</p>
</div>
Rockelina

Äldre 10 Oct 15:03
#6

Visa endast Anmäl

Måste jag använda sånt där parent-child?

Vill ha två spalter bredvid varandra....
vitruviandude

Äldre 10 Oct 16:52
#7

Visa endast Anmäl

<html>
<head>

</head>
<body>
<div id="wrapper" style="width: 960px; margin: 0 auto;">
<div id="header" style="height: 75px; width: 960px; float: left;">

</div>
<div id="left" style="height: 2000px; width: 560px; float: left;">

</div>
<div id="right" style="height: 2000px; width: 400px; float:left;">

</div>
<div id="footer" style="height: 40px; width: 960px; clear: both;">

</div>
</div>
</body>
</html>

Färger och paragrafer utelämnat.
Rockelina

Äldre 10 Oct 23:00
#8

Visa endast Anmäl

Tack familjeliv är så bra. funkade med parent child så håller fast vid det.

Försöker nu fixa fin knapp att trycka på. Har sörsökt kopiera koden på
"Glossy buttons without images using only CSS3"

från denna sida http://www.webdesignerdepot.com/2011/07/css-buttons-tutorials-and-examples/

Men blev bara text No images

Men sidan är annars snygg nu. Massa fel i taggarna säkert men skiter i det om det ser bra ut - är min första hemsida och är snygg. Är ju jättekul göra hemsidor med html css Lite som att måla tavlor.

Kod till klickbar knapp jag kan välja färg på? Helst lite blank så den ser lackad ut...
Hjälp någon smart människa snälla

«
‹
Sida 1 av 1
1
›
»

Svara i tråden

Svar på tråden html css skapa textruta för text så skapar spalter

html css skapa textruta för text så skapar spalter

INNEHÅLL