|
HTML - Att: Coothead
Can you move the navigation buttons in the header right below the title scholz brothers?
Code: html,body {
height:100%;
margin:0;
font-family:verdana,helvetica,arial,sans-serif;
font-size:16px;
}
body {
background-color:#0066FF;
overflow-y:scroll;
}
#container {
width:1050px;
min-height:100%;
padding:0 40px;
margin:auto;
background-color:rgba(32,32,32,0.1);
color:#c96;
box-shadow:#000 0 0 10px;
overflow:hidden;
}
#top {
height:1px; /* this is required to push the #header down */
}
#header {
width:690px;
height:140px;
margin:39px auto 40px;
border:1px solid #ccc;
border-radius:10px;
background-image:url(../images/coloured-nav-bg.gif);
box-shadow:#333 4px 4px 8px;
}
#navigation {
height:55px;
padding:65px 0 0 200px;
margin:0;
list-style-type:none;
}
#navigation li {
float: left;
padding-bottom:2px;
margin:0 2px;
}
#navigation a {
display:block;
line-height:35px;
padding:0 10px;
font-size:80%;
color:#000;
text-decoration:none;
}
#navigation a:hover,#navigation #current {
background-color: #09F;
border-bottom:0;
border-radius:5px;
box-shadow:#333 -1px -1px 1px;
text-shadow:#ddd 1px 1px 1px;
}
#content {
padding-bottom:40px;
}
#content p {
font-size:90%;
color:#cc9;
text-shadow:#58a 1px 1px 1px;
}
h1 {
padding-bottom:20px;
border-bottom:1px solid #000;
text-align:center;
}
h2 {
font-size:120%;
}
h3 {
padding-top:101px;
font-size:120%;
}
#camera {
float:left;
width:430px;
height:240px;
margin:23px 0 0 0;
}
#shutter {
clear:both;
float:right;
width:430px;
height:240px;
margin:65px 0 40px;
}
#photo {
float:left;
width:155px;
height:191px;
}
.line {
position:absolute;
color:#000000;
height:500px;
width:1px;
left:832px;
top:304px;
}
HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Home Page</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="container"> <div id="top"></div><!-- this is required to push the #header down --> <div id="header"> <img src="images/banner.gif" width="690" height="140" alt="banner"> <ul id="navigation" > <li><a id="current" href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="schedule.html">Schedule</a></li> </ul> </div><!--end #header --> <div id="content"> </div><!--end #content --> </div><!--end #container --> </body> </html> Similar TutorialsSo we have the script for a perfect 3 column webpage. And one with a header. And one with a footer. And one with a header and a footer. But now I would like to build a 3 column website with something else. Look at your screen. Then imagine 3 columns. The left column 15%, the middle column 70% and the right column 15%. Draw imaginary lines. Now draw a line between the left and right column say 40 px from the top of the screen. Then again take the below standing script and draw a line between the two columns 20 px from the bottom. Does anyone know how to do this? HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>driekleur pagina</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#linkerkolom {
width:15%;
height:100%;
float:left;
background-color:#333333;
}
#middelste_kolom {
width:70%;
height:100%;
float:left;
background-color:#fff;
}
#rechterkolom {
width:15%;
height:100%;
float:left;
background-color:#333333;
}
</style>
</head>
<body>
<div id="linkerkolom"></div>
<div id="middelste_kolom"></div>
<div id="rechterkolom"></div>
</body>
</html>
|
|||||||