Forum Mjukvara Programmering och digitalt skapande Tråd

html/css behöver hjälp! :(

1
Skriv svar
Permalänk
Medlem
●

html/css behöver hjälp! :(

Hejsan. Har ett litet problem här, har precis börjat lite med css+html, jag ska ha en extern css-fil in i ett html-dokument. Jag har fattar att man i CSS-filen skriver ungefär såhär:

h1 {text-align: center;}
h2 {text-style: italic;}
p {color: navy;}

Jag vet hur man länkar css-filen till html-dokumentet (tror jag)

<link href="cssfil.css" rel="stylesheet" type="text/css"/> Är väl rätt?

Men mitt problem är när jag skriver i HTML-filen typ

Hej jag heter Anton blir det inte kopierat från css-filen eller vad man ska säga.. Vad gör jag för fel? Var ska jag skriva själva texten?

Redigera
Citera flera Citera
Permalänk
Medlem
●

1. Ligger CSS-filen i samma mapp som index.html?
2. Du måste lägga in <p>Hej, jag heter Anton</p>
3. Har du alla andra öppningstaggar som du måste ha? Tup, doctype, html, body osv?

Visa signatur

Jag hatar att vara förkyld!

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://html5boilerplate.com/

Redigera
Citera flera Citera
Permalänk
Medlem
●

Japp CSS-filen ligger i samma map som index filen.

<p> tänkte jag inte på, tack! Antar att det är samma sak med <h1> <h2> då. Antar att dom kan ligga i en table?

Pillade om lite i min kod, såhär ser min kod ut när jag kopierar från DW.

<html>
<head>
<link href="texten.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="1300" border="1" cellpadding="0" cellspacing="0">
<td width="1300" height="35" bgcolor="#FFFF00"><img src="image/bild.jpg" width="50" height="50"><h1>Hallå där</h1></td>
</tr>
</table>

</body>
</html>

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av antuis:

Japp CSS-filen ligger i samma map som index filen.

<p> tänkte jag inte på, tack! Antar att det är samma sak med <h1> <h2> då. Antar att dom kan ligga i en table?

Pillade om lite i min kod, såhär ser min kod ut när jag kopierar från DW.

<html>
<head>
<link href="texten.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="1300" border="1" cellpadding="0" cellspacing="0">
<td width="1300" height="35" bgcolor="#FFFF00"><img src="image/bild.jpg" width="50" height="50"><h1>Hallå där</h1></td>
</tr>
</table>

</body>
</html>

Gå till inlägget

Kör i denna ordning

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

du vill INTE designa HTML taggarna på det sättet du gör nu. Det skulle betyda att alla h1, h2 och p taggar skulle få samma stil över hela sidan.
Det du bör göra är att använda klasser

.center-text {text-align: center;}
.italic-text {text-style: italic;} - ist för detta kan du faktiskt använda "<i>" taggen; <h2><i>denna text är italic</i></h2>
.color-navy {color: navy;}

För att använda klasser läggar man bara in dom i taggen, t.ex;

<h1 class="center-text color-navy">Denna text blir centrerad och får färgen "navy"</h1>

Kom dock ihåg att man bara får använda EN header1 per sida.

Angående TABLE, nej, du ska inte använda table till något annat än att visa data, information, "forumulär" osv. Tables används INTE för att skapa en struktur på hemsidan. Man slutade använda tables för det runt 2000-talet. Idag använder man vanliga <div> (containrar) och placerar allt med CSS, bestämmer width och float: left/right för att låta elementen flyta efter varandra.

Exempel: http://jsfiddle.net/2H32x/

.container {
    width: 968px; /*bestämmer sidans bredd*/
    margin: 0 auto; /*centrerar sidan*/
}

.main-content {
    width: 500px;
    float: left;
    background: green;
}
.right-sidebar {
    width: 368px;
    float: left;
    background: blue;
}
<div class="container">
    <div class="main-content">
        <p> detta är huvudinnehållet</p>
        <p> detta är huvudinnehållet</p>
    </div>
    <div class="right-sidebar">
        <p> detta är en sidebar</p>
        <p> detta är en sidebar</p>
    </div>
</div>
Senast redigerat
Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett tips till framöver, använd divar istället för tables. Tables kan du använda för tabelldata och liknande, men divar kan du göra mycket mer med.

Detta är något som jag önskar mig ha fått reda på när jag började med webbdesign i våras, satt och knåpade med tables väldigt länge innan jag fick det till som jag ville.

Exempel på användning av divar som jag precis knåpade ihop.

CSS:

body {background-image: url('path\source.jpg'); width: 100%, height: 2600px;}
.container {width: 960px; margin-left: auto; margin-right: auto;}
.header {text-decoration: underline; text-style: bold; background-color: #000;}
.header h1 {color: #FFF;}
.content {background-color: #888;}
.content p {color: #111;}

HTML

<body>
<div id="header">
<div id="container"><h1>Bla bla bla</h1>
</div>
</div>
<div id="content">
<div id="container">
<p>Random Content</p>
</div>
</div>
</body>
Dold text

TS: Kör du Codeacademy för att lära dig?

Visa signatur

The Beast:|4770K|ASUS Z97M-PLUS|ASUS GTX 970 Strix|Crucial Ballistix 2x8GB| Seagate Barracuda 2TB|Evo 840 120GB|BitFenix Phenom M|EVGA Supernova G2 750W|
Periphials: Mionix Castor |CM Storm QuickFire Rapid MX Brown|Plantronics RIG 500HD|

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Florrpan:

Kör i denna ordning

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

du vill INTE designa HTML taggarna på det sättet du gör nu. Det skulle betyda att alla h1, h2 och p taggar skulle få samma stil över hela sidan.
Det du bör göra är att använda klasser

.center-text {text-align: center;}
.italic-text {text-style: italic;} - ist för detta kan du faktiskt använda "<i>" taggen; <h2><i>denna text är italic</i></h2>
.color-navy {color: navy;}

För att använda klasser läggar man bara in dom i taggen, t.ex;

<h1 class="center-text color-navy">Denna text blir centrerad och får färgen "navy"</h1>

Kom dock ihåg att man bara får använda EN header1 per sida.

Angående TABLE, nej, du ska inte använda table till något annat än att visa data, information, "forumulär" osv. Tables används INTE för att skapa en struktur på hemsidan. Man slutade använda tables för det runt 2000-talet. Idag använder man vanliga <div> (containrar) och placerar allt med CSS, bestämmer width och float: left/right för att låta elementen flyta efter varandra.

Gå till inlägget
Skrivet av roekpoffen:

Ett tips till framöver, använd divar istället för tables. Tables kan du använda för tabelldata och liknande, men divar kan du göra mycket mer med.

Detta är något som jag önskar mig ha fått reda på när jag började med webbdesign i våras, satt och knåpade med tables väldigt länge innan jag fick det till som jag ville.

Exempel på användning av divar som jag precis knåpade ihop.

CSS:

body {background-image: url('path\source.jpg'); width: 100%, height: 2600px;}
.container {width: 960px; margin-left: auto; margin-right: auto;}
.header {text-decoration: underline; text-style: bold; background-color: #000;}
.header h1 {color: #FFF;}
.content {background-color: #888;}
.content p {color: #111;}

HTML

<body>
<div id="header">
<div id="container"><h1>Bla bla bla</h1>
</div>
</div>
<div id="content">
<div id="container">
<p>Random Content</p>
</div>
</div>
</body>
Dold text

TS: Kör du Codeacademy för att lära dig?

Gå till inlägget

Tack så mycket för svaren fick en hel del uppklarat här.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av antuis:

Tack så mycket för svaren fick en hel del uppklarat här.

Gå till inlägget

Inga problem.

Kolla på mitt svar igen, jag la till lite mer exempel som kan hjälpa dig.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av roekpoffen:

Ett tips till framöver, använd divar istället för tables. Tables kan du använda för tabelldata och liknande, men divar kan du göra mycket mer med.

Detta är något som jag önskar mig ha fått reda på när jag började med webbdesign i våras, satt och knåpade med tables väldigt länge innan jag fick det till som jag ville.

Exempel på användning av divar som jag precis knåpade ihop.

CSS:

body {background-image: url('path\source.jpg'); width: 100%, height: 2600px;}
.container {width: 960px; margin-left: auto; margin-right: auto;}
.header {text-decoration: underline; text-style: bold; background-color: #000;}
.header h1 {color: #FFF;}
.content {background-color: #888;}
.content p {color: #111;}

HTML

<body>
<div id="header">
<div id="container"><h1>Bla bla bla</h1>
</div>
</div>
<div id="content">
<div id="container">
<p>Random Content</p>
</div>
</div>
</body>
Dold text

TS: Kör du Codeacademy för att lära dig?

Gå till inlägget

Hmm en liten fråga, behöver man inte ha HTML-taggar alltså <HTML> <HEAD> osv om man gör på det där sättet?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av antuis:

Hmm en liten fråga, behöver man inte ha HTML-taggar alltså <HTML> <HEAD> osv om man gör på det där sättet?

Gå till inlägget

jo, alltid.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett till litet tips, speciellt när man använder mycket divs är att använda kommentarer, det hjälper till att hålla reda på vad du stänger för div till exempel och om någon annan tar över så har de lättare att förstå koden. Annars kan det se ut som nedan:

<div class="container">
<p>Hej</p>
<div class="content">
<p>Hallå</p>
</div>
<div class="container2">
<p>Hej</p>
</div>
<div class="content2">
<p>Hallå</p>
</div>
</div>

Lägg till några divar till så blir det ofta stökigt, använd istället metoden nedan, man sparar definitivt tid och huvudvärk.

<div class="container">
<p>Hej</p>
<div class="content">
<p>Hallå</p>
</div> <!-- CONTENT -->
<div class="container2">
<p>Hej</p>
</div> <!-- CONTAINER2 -->
<div class="content2">
<p>Hallå</p>
</div> <!-- CONTENT2 -->
</div> <!-- CONTAINER -->

Visa signatur

Chassi: Antec Three Hundred | CPU: Intel i5 2500K @ 4,5GHz | GPU: PowerColor Radeon HD 7970 | Mobo: Asus P8P67 | Skärm: BenQ GL2450 | Nätagg: Corsair TX650

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara