|
CSS - Css Negative Margins And Vanishing Text
In Internet Explorer 6, the following HTML and CSS with negative margins causes the first letter of the heading to disappear:
Code: <html>
<head>
<style type="text/css" media=screen>
#siteBody {
position: absolute;
top: 100px;
left: 100px;
width: 700px;
margin-left: 2em;
}
h1 {
margin-left: -1em;
}
</style>
</head>
<body>
<div id="siteBody">
<h1>This is the heading</h1>
<p>
This is the content.
</p>
</div>
</body>
</html>
There are ways to get the negative margin to work in IE properly, but at a loss of functionality. For instance, if I remove the width property from the siteBody CSS, and change the position to 'relative', the letter will appear. Also, if I remove the div and just place the 'siteBody' id on the body tag, then the first letter will appear. Any help is greatly appreciated as I've been searching for a solution for a couple of days now. Thanks, ---atomgiant Similar TutorialsI am having a problem with negative margins in IE7. On my website: commentsandcapers I am trying to get IE7 to display the right two boxes in the same way that Firefox displays them?? I have tried a few thing including position: relative in a whole bunch of places, none of which works. Do any of you have any idea how to correct this problem? Thanks! I'm working on a set of tabs within tabs (or subtabs). My code is something like this: Code: <ul class="tabs"
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="tab_content">
<ul class="subtabs">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Now, "tab_content" has padding of 10px, because the subtabs won't always be there. But I don't want the padding on the subtabs, so I was giving them a negative margin of -10px. This works in all browsers but IE, which applies everything but the right margin, leaving a white gap. See the image I'm attaching to see what the problem looks like. Anyone know of easy fixes for this? I am having trouble getting safari to recognize my negative margins. It works in IE6,7 and Firefox. I am trying to center the page but to get the first 327 pixels on the left and last 327 on the right to be a negative margin and my center column to have a 1000px fixed width. Here is my css. Any help would be great! .bkg-tile-left { background-image: url(/images/bkg-tile-left.jpg); background-repeat: repeat-y; width: 327px; text-align: left; float: left; overflow: visible; } #bkg-tile-right { background-image: url(/images/bkg-tile-right.jpg); background-repeat: repeat-y; width: 327px; background-position: right; text-align: right; float: right; clear: both; padding-right: -327px; } #bkg-right { background-attachment: scroll; background-image: url(/images/bkg-img-right.jpg); background-repeat: no-repeat; background-position: left top; height: 100%; } #bkg-left { background-attachment: scroll; background-image: url(/images/bkg-img-left.jpg); background-repeat: no-repeat; background-position: right top; height: 100%; } #box1 { margin-left: -327px; margin-right: -327px; position:relative; } AND HTML <body> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" id="box1"> <tr> <td valign="top" class="bkg-tile-left" height="100%"><div id="bkg-left"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td> <td valign="top"><table id="Wrapper" cellpadding="0" cellspacing="0"> <tr> <td id="print_header"><dtml-var standard_print_header ><img src="images/spacer.gif" width="1px" height="1px"></td> </tr> <tr> <td><dtml-var standard_html_header2></td> </tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id="BreadCrumb"><dtml-var standard_html_breadCrumb></td> </tr> </table></td> </tr> <tr> <td valign="top"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <dtml-if standard_html_sidebar> <td valign="top" id="body_content2"><dtml-var body_content2></td> <td valign="top" id="Sidebar2"><dtml-var standard_html_sidebar2></td> <dtml-else> <td valign="top" id="body_content2"><dtml-var body_content2></td> </dtml-if> </tr> </table></td> </tr> <tr> <td id="Footer2" ><dtml-var standard_html_footer2></td> </tr> </table></td> <td valign="top" id="bkg-tile-right"><div id="bkg-right"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td> </tr> </table> </div> </body> Does anyone know how to get this code to display correctly in Opera?
HTML4STRICT Code: Original - HTML4STRICT Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> p { } .mouse { display: inline-block; padding: 6px; margin: -6px; } .mouse:hover { background: #888; border: 2px solid black; padding: 4px; } </style> </head> <body> <p>A <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span></p> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" I has attached some screenshots of my results. When I hover over an element on the right or left edge of the screen, the background and border that results clips because of my negative margins. Hello, I used a negative value for the position of a div on this site: Code: www.godynamic.nl Everything is like it have to be in mozilla browsers but in IE the image is partly beneath the upper layer and hidden. I tried z-index but this will only work with absolute position types. Is there IE hack for this? Thanks for helping. Floating an element left, with negative margins cuts off portions of the element in IE6. Looks fine in FF and IE7. Page he URL Removed by poster XHTML: Code: <div class="miniContainer logos"> <h3>Logos</h3> <div> test </div> </div> CSS: Code: .miniContainer h3 {font: bold 11px Arial,Sans-Serif; color: #000000; background-color: #ffffff; margin: -17px 0 0 -3px; padding: 0 5px; float: left;}
.miniContainer {border: 1px solid #EEEEEE; margin: 0; padding: 10px; float: left;}
.logos {width: 125px;}
.features {width: 100px; margin-left: 10px;}
Is there a workaround for this? I understand why it's happening, but can't figure out a hack for it. i am trying to display a form from a website inside an iframe the problem is, this form displays perfectly in IE: but it displays wrong in FF: heres the CSS: Code:
#container{
width: 380px;
height: 288px;
overflow: hidden;
border: 3px solid #4398d4;
}
#container iframe {
width: 800px;
height: 600px;
margin: -305px 0px 0px -40px;
}
heres the HTML: Code: <div id="container"> <iframe src="http://wow.eroticagateway.com/signup/signup.php?step=signup&qualify=1&site=226&nats=NzUxNjg6MzoyMjY" scrolling="no" frameborder="0"></iframe> </div> any idea why this is happening? apologies if this has been asked and answered already - i did a search of the board but didn't find a clear solution. what i'm trying to do seems simple enough, but isn't turning out that way. lets say i have a page background of some color (e.g., orange). then i have a main container div that is centered with auto margins, and has a white background. i want this main container to start at 100px from the top (so 100px of orange shows above it), and the white background should expand to the bottom of the page - without scrollbars. if i set it's height to 100%, the 100px top margin is added to the 100% height of its parent (body + html), so it acts as if there's 100px of substance beneath the viewport and therefor shows scrollbars. i had assumed a negative bottom margin set for the same amount as the top margin would work, but alas it does not. obviously i don't want to just force-hide scrollbars by overflow:hidden or position:asbolute/fixed - if content in the container forces it to expand, it should do that. otherwise, even if there's very little content - or even none - it should expand to the bottom of the page. i've attached a very basic (non-working) example - any insight would be appreciate. not looking for a hack - i'm looking for the best way to handle this with best-practices. tyia Code: <!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" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<style type="text/css">
html {
height : 100%;
}
body {
margin : 0;
background : #F90;
height : 100%;
}
div.wrapper {
margin : 100px auto -100px auto;
width : 500px;
background : #FFF;
height : 100%;
}
</style>
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>
I'm redoing the layout of my site (www.brohawk.com) using floating divs with negative margins to produce a fluid left column and a fixed right column. I followed an article on A List Apart for the basics and got it working fairly nicely. As a matter of fact, the site works beautifull in Mozilla/Firefox and with minmal errors in NS7. I've even got all but the forums working in Opera. I haven't even begun to work on making it IE compliant. Saving the worst for last. Anyhow, on all the pages except the forums, the divs line up perfectly. However, on the forums page, the right div doesn't stay up top, instead it wraps around under the left div. However, I still get all the space to the right of the left div where the right one should go. Anybody with Opera should be able to check it out and see what I mean. Anyhow, can anybody tell me why it won't float properly on that one page, but it works on all the others? I figured out how to put the text on top of my background Div tag image from a previous post, but this has now shown me another problem. I now need the text to be on top of the white shape only, and not spill onto the gray area. If I remember correctly (I don't have the .ai file any more) the white area is about 500px in width. But whenever I adjust the margins to reflect this, the right side just will not comply. I'll post the two div classes' code below and maybe someone can lend me a hand. Code:
#mainContent {
background-color:transparent;
background-image:url((URL address blocked: See forum rules));
background-repeat:no-repeat;
background-attachment:scroll;
background-position:0% 0%;
height:610px;
margin: 10px;
margin-right: 1cm;
overflow:auto;
padding-top: 1cm;
padding-left: .6cm;
width:550px;
}
#mainContentWrapper {
float:left;
margin-right:11px;
min-height:100%;
width:550px;
}
Does anybody know what the css attributes would look like for the right margin divs like (e.g. #smr-00) found in this tutorial? (see link) css.image.text.wrap.tutorial.htm I've got a real head-scratcher that I cannot find a solution for. The webpage I am talking about is he http://test.ecofreshusa.com/Company.aspx If you see the "breadcrumb-like" submenu (the grey one) in IE, zooming at 100% looks fine, but when you hit Ctrl+ or Ctrl- to text zoom, the margins between every line item (its made using an unordered list).. fall out and the text loses all spacing. Does anyone know where I went wrong? Any help would be much appreciated.. Oh and heres the CSS im using to work with this menu. Code: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#breadcrumb {
position: relative;
left:0px;
top:0px;
width:860px;
vertical-align: middle;
height: auto !important;
background: #F0f0f0;
margin-top: 0px;
display: inline;
}
#breadcrumb_left {
position:absolute;
left:0px;
top:0px;
width:660px;
height:20px;
background-color: #f0f0f0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
#breadcrumb_right {
position:absolute;
float: right;
left:660px;
top:0px;
width:200px;
height:20px;
background-color: #F0F0F0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
div.crumbs { margin: 0px 0px 0px 20px; float: left; font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
}
b.crumb_title { font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;}
.crumbs span {
display: block;
}
.crumbs ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.crumbs ul li {
background: none;
display: inline !important;
margin: 0;
margin-left: 20px;
font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
line-height: 20px;
}
.crumbs a:link { color: #0078C2; text-decoration: none; }
.crumbs a:visited { color: #0078C2; text-decoration: none; }
.crumbs a:hover { color: #629D34; text-decoration:underline; }
.crumbs a:active { color: #629D34; text-decoration:underline; }
.crumbs img {
float: none;
width: 8px;
height: 5px;
border: 0;
margin: 7px 0px 0px 20px;
padding: 0;
}
-->
</style>
I want to make a schedule using a single column (unless that really doesn't make sense). There is an image for the date on the left and then i want all of the days events in chronological order on the right of the image. How do I make the text always indented correctly? I know thats confusing. I want it to look like this: http://www.kdpatton.com/cosmopolis/program.htm well the first entries at least. Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. I'm currently attempting to make a simple template using CSS that has a fixed height header, an expandable content area beneath it and a fixed height footer that stays at the bottom of the page. The footer should move down when the content area expands further than the page height - I don't want to have a scrollable div for the content area. Easy, right? The problem I'm having is that I need to define 'overflow:auto' within the content div in order for it to be able to expand further than the initial 100% when necessary, but the inclusion of this property causes the footer to disappear without a trace in Safari. It works correctly in Firefox however. Below is the CSS stylesheet and the HTML from the template file. Any ideas what I can do to fix this problem? Thanks. Code:
html, body {
background-color: #efefef;
height: 100%;
margin: 0;
}
#container {
height:100%;
min-height:100%;
width: 790px;
padding: 0 5px;
margin-right: auto;
margin-left: auto;
margin: 0 auto -20px;
background-color: #fff;
overflow: auto;
}
#container .header {
float: left;
margin-top: 5px;
width: 790px;
height: 130px;
background-color: #000;
color: #fff;
}
#container .navigation {
float: left;
width: 790px;
height: 30px;
margin-top: 5px;
}
#container #content {
float: left;
margin-top: 5px;
width: 790px;
font-family: Verdana, arial;
font-size: small;
}
#spacer {
clear: both;
width: 790px;
height: 20px;
}
#footer {
height: 20px;
width: 790px;
margin-left: auto;
margin-right: auto;
background-color: #cecece;
}
Code:
<html>
<head>
<title>
{TITLE}
</title>
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<link rel="stylesheet" type="text/css" href="./css/navigation.css" />
<link rel="stylesheet" type="text/css" href="./css/content.css" />
</head>
<body>
<div id='container'>
<div class='header'>
{HEADER}
</div>
<div class='navigation'>
{NAVIGATION}
</div>
<div id='content'>
{CONTENT}
</div>
<div id='spacer'></div>
</div>
<div id='footer'>
{FOOTER}
</div>
</body>
</html>
I've got a dropdown menu that works great in Firefox, Opera, Safari, and Chrome. In fact it ALMOST works in IE7, except for an annoying bug that happens when the person is using the drop down menu. As the user moves the mouse partway down the menu, the menu will suddenly vanish, making the rest of the menu unusable. The live website is he http://www.a-1plumbing.us/100.html Here's my menu CSS code: Code: /* menu */
#navcontainer {padding-left:235px; margin:0; height:36px;}
#menu {
position:relative; display:table;
list-style-type:none;
margin:0; padding:0;
/* width:552px; */
height:24px;
z-index:5;
}
.menuitem {
position:relative; display:table-cell; float:left;
margin:0; padding:0;
width:128.75px;
overflow:hidden;
}
.menuitem ul {
display:none; /* hide it first off */
margin: 0; padding:0;
list-style-type:none;
}
.menuitem li { margin:0; padding:0; overflow:visible;}
.submenu li { position:relative; z-index:10;}
/* 2-class selector to have higher weight than ".menuitem ul" */
.submenu .subsubmenu {
position:absolute;
top:0;
display:none;
}
.menuitem:hover {
overflow:hidden;
z-index:10;
position:relative;
}
.menuitem:hover ul{
display:block;
}
.meunuitem:hover, .menuitem:hover ul{
position:static; }
.submenu li:hover > .subsubmenu {
display:block;
}
#menu a {
display:block;
margin:0; padding: 0.2em 0.5em;
text-align:center;
text-decoration:none;
font: normal small-caps 1em Verdana, Arial, Helvetica, sans-serif;
color:black ! important;
}
#menu a:hover { text-decoration: underline; color:black }
.menuitem a { background-color:transparent;}
#menu .menuitem ul a { background-color:#D71921; color:white ! important; font-size:0.8em ! important;}
#menu .menuitem ul ul a { background-color:darkblue; color:white ! important; font-size:0.8em ! important }
#pindex #mindex, #p100 #m100, #pcontact #mcontact, #ptips #mtips {color: #005D8B ! important;}
#menu .menuitem ul a#sm { background:#D71921 url('../images/seal_small.gif') no-repeat center left ! important; padding-left: 1.5em ! important; }
#phoneNum {display:none}
.submenu {border:1px solid white;}
Here is my HTML code: Code: <div id="navcontainer">
<ul id="menu">
<li class="menuitem"><a href="home.html" id="mindex"><strong>Home</strong></a></li>
<li class="menuitem"><a href="100.html" id="m100"><strong>Guarantee</strong></a>
<ul class="submenu">
<li><a href="./100.html#s_100">100% Guarantee</a></li>
<li><a href="./100.html#s_time">On Time or it's Our Dime</a></li>
<li><a href="./100.html#s_seal" id="sm">Technician<br />Seal of Safety</a></li>
<li><a href="./100.html#s_clean">Cleanliness</a></li>
</ul>
</li>
<li class="menuitem"><a href="tips.html" id="mtips"><strong>Tips</strong></a>
<ul class="submenu">
<li><a href="./tips.html#ttt">Toilet Trouble</a></li>
<li><a href="./tips.html#tfd">Flooded Basement</a></li>
<li><a href="./tips.html#twl">Water Leak</a></li>
<li><a href="./tips.html#tbs">Blocked Sewer</a></li>
<li><a href="./tips.html#tnhw">No Hot Water</a></li>
<li><a href="./tips.html#tgl">Gas Leak</a></li>
<li><a href="./tips.html#tcd">Clogged Drain</a></li>
</ul>
</li>
<li class="menuitem"><a href="./contactus.html" id="mcontact" ><strong>About Us</strong></a>
<ul class="submenu">
<li><a href="./testimonials.html">Testimonials</a></li>
<li><a href="./service_area.html#serve">Service Area</a></li>
<li><a href="./feedback.html#feedback">Feedback Form</a></li>
<li><a href="./contactus.html#phone">Phone</a></li>
<li><a href="./contactus.html#address">Address</a></li>
</ul>
</li>
</ul>
</div> <!-- end NAV container -->
I've tried using "position: static" in several divs, but this bug does not seem to be related to the other (and well known) IE7 positioning bugs. Does anyone have any idea why the menus vanish as you mouse down them? It appears to be triggered if there is a DIV under the menu. For example, on this page ( http://www.a-1plumbing.us/tips.html ) the "Guarantee" drop down menu works quite well, because there is no div under neath it. (due to the improper floating IE7 bug, which I'll fix soon. :P ) Thanks for any input! -Suthern101 Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. In FF3 this code behaves correctly but not in IE6. The main content disappears. Any ideas why and how to fix it? Code:
<!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" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #00FF00;
}
#wrapper {
font-size:0.8em;
font-family:"Arial";
position: relative;
min-width:960px;
}
#container {
margin: 0 auto;
width: 960px;
background-color: #fff;
}
#header {
background-color: #0033FF;
width:960px;
padding-bottom:50px;
height: 152px;
}
#contentWrapper {
margin-left: auto;
margin-right: auto;
width: 85%;
margin-top: -60px;
z-index: 1;
position: relative;
background-color:#FFF;
min-height:500px;
padding-left:20px;
padding-top:20px;
}
#mainContent {
float:left;
width:50%;
}
#services {
padding-left:60px;
float:left;
}
#footer {
clear:both;
background-color: #CC0033;
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
<div id="contentWrapper">
<div id="mainContent">
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
<div id="services">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
</div>
<div id="footer">
<p>
Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
</div>
</div>
</body>
</html>
|
|||||||