Hjälp med HTML/CSS (Total nybörjare)

2012-01-27 16:52

Permalänk

Paranoid Android

Medlem

Plats: Jorden
Registrerad: Sep 2004

●

Hjälp med HTML/CSS (Total nybörjare)

Hej!

Jag har lite problem med CSS. Jag är helt ny på både CSS och HTML. Jag ska göra en sida som ser ut ungefär så här:
http://hem.passagen.se/user.unknown/exempelsida.jpg

Men jag lyckas inte få rätt på det. Jag får den att se ut så här

Finns det någon vänlig själ som kan tala om för mig vad jag gör för fel?
Jag skulle även bli glad för tips på hur jag gör ramar runt bilderna så att det ser ut som på exempelbilden.

Tacksam för all hjälp jag kan få.
CSS-koden:

#container {
background-color: #6e78c8;
width: 850px;
margin-right: auto;
margin-left: auto;
}
#b {
background-color: #CF3;
height: 269px;
width: 400px;
}
#c {
background-color: #F00;
float: left;
height: 269px;
width: 450px;
}
#d {
background-color: #CF0;
width: 450px;
clear: both;
float: right;
}
#e {
background-color: #F99;
height: 281px;
width: 450px;
float: left;
}
#f {
background-color: #F93;
width: 450px;
float: right;
}

#a {
background-color: #3CC;
height: 562px;
width: 850px;
}

Dold text

Visa signatur

Don't put your USB-stick where it doesn't belong.

Rapportera Redigera

Citera flera Citera

2012-01-27 18:59

Permalänk

anon150287

Inaktiv

Registrerad: Apr 2010

●

Ett tips är att de dina element bättre semantiska namn. a, b, c etc. beskriver varken vad det är eller vad det utför.

Ramarna är lite svårare. Här är några lösningar: http://css-tricks.com/snippets/css/multiple-borders/ http://www.impressivewebs.com/multiple-borders-css/

Rapportera Redigera

Citera flera Citera

2012-01-27 21:29

Permalänk

Sp4rgr1sen

Medlem

Registrerad: Dec 2010

●

Hej, "both:clear" behövs inte, och sätt float till "left" på båda, även den artikeln till höger ska har float left. Gjorde ett litet exempel snabbt åt dej, kopiera nedstående i text t.ex anteckningar och spara som "index.html" sen öppna och lär.

<html>
<head>
<style type="text/css">
#container{
width:850px;
margin:0px auto 0px auto;
background-color:#6E78C8;
}
#a{
height:500px;
background-color:#3CC;
}
#b{
height:300px;
background-color:#CF3;
}
#c{
height:300px;
width:425px;
float:left;
background-color:red;
}
#d{
height:300px;
width:425px;
float:left;
background-color:#CF0;
}

#e{
height:300px;
width:425px;
float:left;
background-color:#F99;
}
#f{
height:300px;
width:425px;
float:left;
background-color:#F93;
}
</style>
</head>

<body>
<div id="container">
<div id="a"><h1>Rubrik</h1></div>

<div id="c"><span>Bild 1</span></div>
<div id="d"><h2>Rubrik</h2>
<br/>
<span>blalbalblalblablablbalbalbalbalbalbbab</span>
</div>

</div>

<div id="e"><span>Bild 2</span></div>
<div id="f"><h2>Rubrik</h2>
<br/>
<span>blalbalblalblablablbalbalbalbalbalbbab</span>
</div>

</div>

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

Rapportera Redigera

Citera flera Citera

2012-01-28 13:48

Permalänk

noshorning

Medlem

Plats: haninge
Registrerad: Sep 2009

●

Varför använda id när alla ser likadana ut i princip? Använ class istället så behöver du bara tre element istället för alla som du har nu:

CSS:

.container{
width:600px;
margin:0px auto 0px auto;
}
.a{
height:500px;
width: 600px;
float: left;
}
.b{
height:300px;
width:300px;
float: left;
}

html:

<div class="container">
 <div class="a"><h1>Rubrik</h1></div>

 <div class="b"><h1>Bild 1</h1></div>
 <div class="b"><h1>Rubrik</h1>
   <p>blalbalblalblablablbalbalbalbalbalbbab</p>
  </div>




  <div class="b"><h1>Bild 2</h1></div>
  <div class="b"><h2>Rubrik</h2>
   <p>blalbalblalblablablbalbalbalbalbalbbab</p>
  </div>

</div>

Visa signatur

Never underestimate the power of carefully worded nonsense.

www.vitorm.se - Min egenutvecklade bloggportal
utveckling.vitorm.se - Min blogg om webbutveckling
noshorning.vitorm.se - Min träningsblogg

Rapportera Redigera

Citera flera Citera

2012-01-28 17:43

Permalänk

Calimi

Medlem

Plats: Göteborg
Registrerad: Mar 2010

●

@charset "utf-8";
/* CSS Document */

.container{
width:600px;
margin: 0 auto;
color: #insert;
}

.a{
height:500px;
width: 600px;
float: left;
background: url (motorcykel.jpg);
}

.b-ram{
height:300px;
width:300px;
float: left;
border-width: 8px;	
border-style: ridge; 
}

.b{
height:300px;
width:300px;
float: left;
}

h2 {
color: blue;
text-transform: uppercase; 
}

ul { 
color: blue;
}

p {
color: blue;
}

article, aside, footer, header, section {
display: block;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Motorcykel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="container">
<section class="a">
</section>

<section class="b-ram" style="background: url (stad1.jpg);">
</section> 

<section class="a" style="color: orange">
<h2>Rubrik</h2>
<p>BLABLABLA
</p>
</section>

<section class="b-ram" style="background: url (stad2.jpg);">
</section> 

<section class="b>
<h2>Rubrik</h2>
<ul>
<li>BLA BLA</li>
<li>BLA BLA</li>
<li>BLA BLA</li>
<li>BLA BLA</li>
</ul>
</section> 

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

Det borde fixa din sida. Bara klippa och klistra

Visa signatur

Fraktfritt, Inet | SBE Marin, segling runt Malta

Rapportera Redigera

Citera flera Citera

2012-01-28 22:28

Permalänk

Sp4rgr1sen

Medlem