Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.
Posted 19 September 2012 - 08:18 AM
Edited by michael-m, 19 September 2012 - 08:18 AM.
Posted 19 September 2012 - 08:32 AM
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div layout test</title>
<style>
#header {
background-color: green;
}
#menu {
background-color: red;
}
#content {
background-color: brown;
}
#footer {
background-color: grey;
}
</style>
</head>
<body>
<div id="header">Header Here</div>
<div id="menu">Menu here</div>
<div id="content">Content here</div>
<div id="footer">Footer here</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div layout test</title>
<style>
#header {
background-color: green;
}
#menu {
background-color: red;
float:left;
width: 25%;
}
#content {
background-color: brown;
float:right;
width: 75%;
}
#footer {
clear: both;
background-color: grey;
}
</style>
</head>
<body>
<div id="header">Header Here</div>
<div id="menu">Menu here</div>
<div id="content">Content here</div>
<div id="footer">Footer here</div>
</body>
</html>
Lawrence Abrams
Circle BleepingComputer on Google+!
Become a BleepingComputer fan: Facebook
Follow us on Twitter!
How to detect vulnerable programs using Secunia Personal Software Inspector <- Everyone should do this!
Simple and easy ways to keep your computer safe and secure on the Internet <- Everyone must read this!
Posted 19 September 2012 - 01:07 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My dogs' test site</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 8em;
left: 1em;
width: 9em }
h1 {padding-left: 9em;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
h2 {padding-left: 12em;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>
<!-- Main content -->
<h1>My Main Heading</h1>
<h2>My Secondary Heading</h2>
<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/>
<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/>
<p>Welcome to my styled page!<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My dogs' test site</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 8em;
left: 1em;
width: 9em }
h1 {padding-left: 9em;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
h2 {padding-left: 12em;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>
<!-- Main content -->
<h1>My Main Heading</h1>
<h2>My Secondary Heading</h2>
<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/>
<img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.
<!-- Sign and date the page, it's only polite! -->
<address>Made 19 Sept 2012<br>
by myself.</address>
</body>
</html>
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.
<!-- Sign and date the page, it's only polite! -->
<address>Made 19 Sept 2012<br>
by myself.</address>
</body>
</html>
Edited by michael-m, 19 September 2012 - 01:16 PM.
Posted 24 September 2012 - 01:31 PM
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 8em;
left: 1em;
width: 9em }
h1 {padding-left: 9em;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
h2 {padding-left: 12em;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
Lawrence Abrams
Circle BleepingComputer on Google+!
Become a BleepingComputer fan: Facebook
Follow us on Twitter!
How to detect vulnerable programs using Secunia Personal Software Inspector <- Everyone should do this!
Simple and easy ways to keep your computer safe and secure on the Internet <- Everyone must read this!
Posted 25 September 2012 - 04:43 PM
Posted 26 September 2012 - 01:12 PM
Lawrence Abrams
Circle BleepingComputer on Google+!
Become a BleepingComputer fan: Facebook
Follow us on Twitter!
How to detect vulnerable programs using Secunia Personal Software Inspector <- Everyone should do this!
Simple and easy ways to keep your computer safe and secure on the Internet <- Everyone must read this!
Posted 27 September 2012 - 07:42 AM
<input type="text" id="name" value="foo" /> <input type="text" class="otherName" value="bar" />
#name
{
color: blue;
...
}
.otherName
{
color: red;
...
}
<form class="myForm">
<div>
<input type="text" value="foo" />
</div>
<form>
.myForm div input
{
color: black;
}
Edited by groovicus, 27 September 2012 - 07:45 AM.
Added sample url
Posted 27 September 2012 - 04:05 PM
Post what you have so far with the floating div solution.
body {padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
background-color: #CCCC99; }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 7.3em;
left: 1em;
width: 9em }
h1 {padding-left: 8em; color:blue; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-size:30px;}
h2 {padding-left: 9em; color:red; font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif; font-size:20px;}
p {color:blue;font-size:20px}
ul.navbar li {
background: #d8da3d;
margin: 0.5em 0;
padding: 0.3em;
border-right: 0em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
<!DOCTYPE html> <html> <head> <title>My Dog Website</title> <link rel="stylesheet" href="omydstylesheet.css"> </head> <body> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="home.html">Home</a> <li><a href="meandmydogs.html">My dogs</a> <li><a href="dogwalking.html">Dog Walking</a> <li><a href="links.html">Links</a> <li><a href="contact.html">Contact</a> </ul> <!-- Main content --> <h1>My Dogs Website</h1> <h2>This is my website about my dogs</h2> <br> <img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/> <img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/> <p>Welcome to my dog site.</p> <p>There's stuff missing, but at least it has style. And it has links, even if they don't go anywhere...but they do now.</p> <p>There should be more here, but I don't know what yet.</p> <!-- Sign and date the page, it's only polite! --> <address>27 Sept 2011<br> website by me</address> </html>
#header {
background-color: green;
}
#menu {
background-color: red;
float:left;
width: 25%;
}
#content {
background-color: brown;
float:right;
width: 75%;
}
#footer {
clear: both;
background-color: grey;
}
<html> <head> <meta charset=utf-8 /> <title>Div layout test</title> </head> <body> <div id="header">Header Here</div> <div id="menu">Menu here</div> <div id="content">Content here</div> <div id="footer">Footer here</div> </body> </html>
#header {
background-color: green;
}
#menu {
background-color: red;
float:left;
width: 25%;
}
#content {
background-color: brown;
float:right;
width: 75%;
}
body {padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
background-color: #CCCC99; }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 7.3em;
left: 1em;
width: 9em }
h1 {color:blue; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-size:30px;}
h2 {color:red; font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif; font-size:20px;}
p {color:blue;font-size:20px}
ul.navbar li {
background: #d8da3d;
margin: 0.5em 0;
padding: 0.3em;
border-right: 0em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
#footer {
clear: both;
background-color: grey;
}
<html> <head> <meta charset=utf-8 /> <title>Div layout test</title> <title>My Dog Website</title> <link rel="stylesheet" href="omydstylesheet.css"> </head> <body> <div id="header">Header Here</div> <div id="menu">Menu here</div> <div id="content">Content here</div> <div id="footer">Footer here</div> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="home.html">Home</a> <li><a href="meandmydogs.html">My dogs</a> <li><a href="dogwalking.html">Dog Walking</a> <li><a href="links.html">Links</a> <li><a href="contact.html">Contact</a> </ul> <!-- Main content --> <h1>My Dogs Website</h1> <h2>This is my website about my dogs</h2> <br> <img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/> <img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/> <p>Welcome to my dog site.</p> <p>There's stuff missing, but at least it has style. And it has links, even if they don't go anywhere...but they do now.</p> <p>There should be more here, but I don't know what yet.</p> <!-- Sign and date the page, it's only polite! --> <address>27 Sept 2011<br> website by me</address> </body> </html>
Posted 27 September 2012 - 06:25 PM
Posted 28 September 2012 - 01:46 AM
Output of code above - What is it that you are trying to achieve?
Posted 28 September 2012 - 04:12 AM
#header {
}
#menu {
float:left;
width: 25%;
}
#content {
float:right;
width: 75%;
}
#footer {
clear: both;
}
body {
font-family: Georgia, "Times New Roman",
Times, serif;
background-color: #CCCC99; }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 7.3em;
left: 1em;
width: 9em }
h1 {color:blue; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-size:30px;}
h2 {color:red; font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif; font-size:20px;}
p {color:blue;font-size:20px}
ul.navbar li {
background: #d8da3d;
margin: 0.5em 0;
padding: 0.3em;
border-right: 0em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
<html> <head> <meta charset=utf-8 /> <title>Div layout test</title> <title>My Dog Website</title> <link rel="stylesheet" href="testmix.css"> </head> <body> <div id="header"><h1 align="center">My Dogs Website</h1> <h2 align="center">This is my website about my dogs</h2> <br></div> <div id="menu"> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="home.html">Home</a> <li><a href="meandmydogs.html">My dogs</a> <li><a href="dogwalking.html">Dog Walking</a> <li><a href="links.html">Links</a> <li><a href="contact.html">Contact</a> </ul> </div> <!-- Main content --> <div id="content"> <img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2008_0101birthday0004.jpg" width="400" height="320"/> <img src="http://i538.photobucket.com/albums/ff342/DrumwhannanElla/BIGGSD%20Dogs%20Blog/2011_0420Blackhill20Apr0007.jpg" width="400" height="320"/> </div> <div id="footer"> <p>Welcome to my dog site.</p> <p>There's stuff missing, but at least it has style. And it has links, even if they don't go anywhere...but they do now.</p> <p>There should be more here, but I don't know what yet.</p> <!-- Sign and date the page, it's only polite! --> <address>28 Sept 2011<br> website by me</address> </div> </body> </html>
Posted 28 September 2012 - 10:27 AM
Lawrence Abrams
Circle BleepingComputer on Google+!
Become a BleepingComputer fan: Facebook
Follow us on Twitter!
How to detect vulnerable programs using Secunia Personal Software Inspector <- Everyone should do this!
Simple and easy ways to keep your computer safe and secure on the Internet <- Everyone must read this!
Posted 10 October 2012 - 07:22 AM
Posted 11 December 2012 - 04:30 PM
0 members, 0 guests, 0 anonymous users