Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Problem with margin-top

estigma
in Frontend

Featured Replies

I got a problem with margin-top dont work in this:

 

p.overskrift
{
   font-family: "Trebuchet MS", Verdana;
   font: "Trebuchet MS", Verdana;
   font-size: 11px;
   color: #484848;
   margin-bottom:5px;
   margin-top:10px;
}


<p class="overskrift">
Overskrift
</p>

 

 

This is the whole code:

 

CSS:

* { 
margin: 0; 
padding: 0; 
}


body, html { 
height:100%; 
background-image:url(es_bg.jpg); 
text-align:center;
}


p
{
   font-family: "Trebuchet MS", Verdana;
   font: "Trebuchet MS", Verdana;
   font-size: 10px;
   color: #797979;
   margin-bottom:6px;
}

p.overskrift
{
   font-family: "Trebuchet MS", Verdana;
   font: "Trebuchet MS", Verdana;
   font-size: 11px;
   color: #484848;
   margin-bottom:5px;
   margin-top:10px;
}

#element { 
background-image:url(shadowbg.png);
background-repeat: repeat-y; 
width:800px; 
margin:0 auto; 
min-height:100%; 
color:#000;
}

#innhold { 
width:734px;
margin:0 auto;
text-align:left;
}

#header { 
   background-image:url(es_tobg2.jpg);
background-repeat: no-repeat; 
width:734px;
height:107px;
color:white;
margin:0 0 0 0;
text-align:left;
}

#menu { 
   background-image:url(es_mebg.jpg);
background-repeat: no-repeat; 
width:734px;
height:71px;
color:white;
background-color:#aaa;
text-align:left;
}

#text { 
width:694px;
height:auto;
color:black;
background-color:#fff;
padding:10px 20px 20px 20px;
text-align:justify;
}



#contentleft {
width:222px;
margin:0px 14px 0px 0px;
float:left;
background:#fff;
}

#contentcenter {
width:222px;
margin:0px 14px 0px 0px;
float:left;
background:#fff;
}

#contentright {
width:222px;
margin:0px;
float:left;
background:#fff;
}




#footer {
width:734px; 
margin:-45px auto 0 auto; 
text-align:right;
height:45px; 
background-image:url(es_bobg.jpg);
background-repeat: repeat-x;
color:#fff; 
}

.msg {
   font-family: "Century Gothic", "Trebuchet MS", Verdana;
   font: "Century Gothic", "Trebuchet MS", Verdana;
   font-size: 9px;
   color: #eee;
   text-decoration: none;
padding-top: 20px;
padding-right: 9px;
}

p.msg a:link {
 color: #eee;
 text-decoration:none;
}

p.msg a:visited {
 color: #eee;
 text-decoration:none;
}

p.msg a:hover {
 color: #bbb;
 text-decoration:none;
}

p.msg a:active {
 color: #eee;
 text-decoration:none;
}



* html #element { 
height:100%;
}

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>test</title>
</head>
<body>

<div id="element">


<div id="innhold">

<div id="header">
</div>

<div id="menu">
</div>

<div id="text">


<div id="contentleft">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer gravida tempor pede. Aliquam sollicitudin. Nullam fermentum, metus quis varius ullamcorper, orci justo egestas massa, ut blandit ligula ligula vel lacus. In a purus et felis blandit lobortis. Pellentesque vulputate tellus ac ligula pulvinar hendrerit. Quisque egestas dignissim augue. Sed cursus pede quis dui. Fusce condimentum, elit eget dignissim ultrices, quam urna hendrerit risus, eget sagittis magna ligula eget metus. Duis at pede. In elementum leo sit amet metus. Nulla feugiat commodo felis.
</p></div>

<div id="contentcenter">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer gravida tempor pede. Aliquam sollicitudin. Nullam fermentum, metus quis varius ullamcorper, orci justo egestas massa, ut blandit ligula ligula vel lacus. In a purus et felis blandit lobortis. Pellentesque vulputate tellus ac ligula pulvinar hendrerit. Quisque egestas dignissim augue. Sed cursus pede quis dui. Fusce condimentum, elit eget dignissim ultrices, quam urna hendrerit risus, eget sagittis magna ligula eget metus. Duis at pede. In elementum leo sit amet metus. Nulla feugiat commodo felis.
</p></div>

<div id="contentright">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer gravida tempor pede. Aliquam sollicitudin. Nullam fermentum, metus quis varius ullamcorper, orci justo egestas massa, ut blandit ligula ligula vel lacus. In a purus et felis blandit lobortis. Pellentesque vulputate tellus ac ligula pulvinar hendrerit. Quisque egestas dignissim augue. Sed cursus pede quis dui. Fusce condimentum, elit eget dignissim ultrices, quam urna hendrerit risus, eget sagittis magna ligula eget metus. Duis at pede. In elementum leo sit amet metus. Nulla feugiat commodo felis.
</p></div>

<p class="overskrift">
Overskrift
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer gravida tempor pede. Aliquam sollicitudin. Nullam fermentum, metus quis varius ullamcorper, orci justo egestas massa, ut blandit ligula ligula vel lacus. In a purus et felis blandit lobortis. Pellentesque vulputate tellus ac ligula pulvinar hendrerit. Quisque egestas dignissim augue. Sed cursus pede quis dui. Fusce condimentum, elit eget dignissim ultrices, quam urna hendrerit risus, eget sagittis magna ligula eget metus. Duis at pede. In elementum leo sit amet metus. Nulla feugiat commodo felis.</p>
<p>
Morbi eu nunc. Vivamus eu risus vel diam feugiat gravida. Ut magna. Donec ac mi nec massa pharetra dictum. Nulla ut lacus in ipsum condimentum mollis. Duis ut nibh. Nullam et nulla. In porta, enim aliquet ultricies euismod, nulla nunc faucibus justo, non rhoncus mauris ligula quis mauris. Etiam ut nunc. Nulla rutrum. Mauris nec quam ac velit lacinia cursus. Donec vestibulum pretium neque. Nulla facilisis, justo a sagittis pulvinar, odio neque ullamcorper odio, vitae feugiat lorem quam sit amet justo.</p>
<p>
Cras venenatis varius metus. Mauris ut mi in turpis sagittis vulputate. Pellentesque vel lacus. Mauris semper, mauris eget consectetuer eleifend, dui turpis euismod purus, et varius urna turpis nec risus. Mauris sit amet erat a ante laoreet suscipit. Nam nec tortor. Vivamus eget est. Sed sed dui eu nisi cursus malesuada. Praesent sed lorem quis odio euismod luctus. Donec augue.</p>
<p>
Fusce purus elit, vulputate in, imperdiet interdum, faucibus ut, arcu. Donec at lectus eu lorem pretium elementum. Etiam neque. Proin tincidunt, augue in sollicitudin aliquam, sapien urna vulputate nisl, sed fermentum augue magna a sem. Ut aliquet. Nulla aliquet pede non arcu. Donec scelerisque, ligula nec porttitor condimentum, justo ante consequat risus, dictum dignissim nisi tortor et ante. Etiam sagittis nibh in dolor. Nullam luctus, metus ac semper tincidunt, pede dui congue enim, sed malesuada lorem purus sed velit. Duis viverra pellentesque est. Integer tincidunt molestie lorem. Proin urna nisl, condimentum id, semper quis, interdum vel, sapien. Vestibulum felis tellus, vehicula fringilla, venenatis eget, tristique imperdiet, sem. Aliquam ut nisl.</p>
<p>
Aenean sollicitudin pede facilisis ipsum. Aenean dignissim dolor non sem. In hac habitasse platea dictumst. Nulla facilisi. Phasellus et velit ut nisi posuere placerat. Aenean ac arcu. Suspendisse elit. Vivamus tempor porta diam. Ut dolor. Proin felis nisi, ornare vitae, posuere non, auctor in, odio. Donec suscipit pede consequat neque. Vestibulum id augue mattis felis varius congue. Maecenas et purus placerat diam dapibus malesuada. Nam molestie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ac enim. 
</p>


</div>

</div>
</div>


<div id="footer">

<p class="msg">
Utviklet av test | <a href="mailto:post@test.no">post@bergtatt.no</a>
</p>



</div>

</body>
</html>

That will be because your content above the p is floated and it is trying to float the p

 

p.overskrift
{
font-family: "Trebuchet MS", Verdana;
font: "Trebuchet MS", Verdana;
font-size: 11px;
color: #484848;
margin-bottom:5px;
margin-top:10px;
clear: both;
}

 

adding clear: both;

 

to the paragraph tells it that it should be below the floated content and your margin should work :) let me know how it goes

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.