|
CSS - Layout Question - Simplebits.com
I have a layout question for which I will reference Dan Cederholm's site, http://www.simplebits.com. He has a two column layout, div#content on the left and div#sidebar on the right, both are contained by div#main-body. #content is floated to the left and #sidebar is floated to the right. How is he #main-body to extend the entire length of the page without containing some normal flow elements?
Similar TutorialsI'm building a simple gallery site for my old man, who wants a place to upload his artwork. I've made all the slices in ImageReady for the images around the edge of the screen, and customised the code so that they fit to any resolution. I'm having a problem with the DIV tag that I would like to contain the main section of the site. I would like it to fit the gap in the middle - whatever size that may be - so it can scroll if necessary later on. As it is though, it just wraps around whatever content I put there. Here's the stylesheet code for that particular DIV: Code:
#vg-09 {
position:absolute;
margin-top:183px;
margin-left:49px;
margin-right:56px;
margin-bottom:97px;
background-image: url(images/vg_09.gif);
}
I thought those margins would make it meet the surrounding images, but it doesnt work. I've also tried setting the height and width to 100%, but then it extends beyond the size of the screen and looks ugly after scrolling. Here's the Page: http://vic.retina-designs.com Does anyone know how I can get that DIV layer to sit flush against all the surrounding images? Thanks for any help! EDIT: Added the link hi at my workplace they have asked me to create a simple html page which will be used as a small widget in a website. as per the requirement in the html file. i should not use an external stylesheet and also no embedded style however i should write the page completely using inline css. all this is fine. however my question and issue i am facing is with adjusting height as the content increasing when i give for example margin or padding. please check out this link where i have created an image of what i am creating as html page using inline css. http://www.sudhakargolakaram.co.in/form.html as per the image there is an outer div which has the light blue background color which i have created like a container div with the background color the dark blue rectangles are 3 images and the white color on the right with the rounded rectangle at the top and bottom is where content like header tag, img tag, forms etc will be used. lets say for example i divide the images and content as 2 divs floating left with images div as 100px and content on the right as 300px width so a total of 400px and a total height of 300px based on the design that i have the total width is 400px (left div with images=100px and right div with content=400px) and total height is 300px for example. i am ok with the left div as the images have a fixed width and height, the problem i am facing with is the content div. as the content div contains header tags, a small paragraph information within p tag, a small form with about 2 to 3 form fields, in order to add all these elements as per the design i am using padding top, padding bottom and if needed margin top and margin bottom. so due to this the content may go beyond the bottom div which has the rounded rectangle at the bottom, and this is not how it should appear the entire content should sit inside the 300px height in the right div so do i have to keep subtracting the amount of padding and margin i am using from the height value of the right div so that the content sits inside within the total 300px height. how do i go about this height aspect which i am having issue with and also is there something specific that i have to keep in mind for ie6 browser. for the left and right div do i have to use #left{ float: left; width: 100px; height: auto; } #right{ float: left; width: 300px; height: auto; } or do i have to specify the fixed height which is 300px for #left and #right divs also in the #right div i am using 3 inner divs 1 for top rounded rectangle background = { background: url(topbg.jpg no-repeat; width:300px; height: 10px; } 2nd div with white background color no background image= do i have to specify a fixed height for this 2nd div = { width:300px; height: ; } 3rd for bottom rounded rectangle background image = { background: url(bottombg.jpg no-repeat; width:300px; height: 10px; } any help will be greatly appreciated. thanks. 'ello question, right.. a table sumthing like dis.. <table style="width: 100%"> <tr> <td style="width: 200px;"></td> <td></td> </tr> </table> gives ya a nice two column layout, where the first has a fixed width, and the second column fill the rest of the parent container. Also, heres the kicker.. when u get loads of content in the second column, and it get extended vertically, the second container is as well.. and thats nice and all.. So, question.. how do i do this with divisions and CSS? i tried a ton of different stuff, and the closest thing i came was using height: 100% and like, scrollbars in the second column. But i dont really want that.. I think like, min-height is the solution, but a cant tame it, when i start using it.. things goes weird :P the table model works, but i really want to lean to do this "right" so, lill' help please? cheers, So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text. I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want. Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!! 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" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
margin: 0;
background: #0C0 url(landscaping1.jpg) no-repeat center top;
}
#leftcontent
{
border:1px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height:300px;
border-radius:12px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
float:left;
position:relative;
top:450px;
left:80px;
}
</style>
<title>Mueller Lawn and Lanscape 2012</title>
</head>
<body>
<div id="leftcontent">
Some text goes here.
</div>
</body>
</html>
Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now. http://i110.photobucket.com/albums/n120/infantryclothing/0cb6b676.png I'm working on www.wirelessguy.net and I'm trying to add something to my layout. I want to have an outer box that surrounds the content and then add left and right borders to it so I can change the outside background color. I'm currently using 10% left/right margins to get the material in the middle of the page. Here is my css for the outerbox: Code:
div#outerBox
{
margin-left:-5%;
margin-right:-5%;
border-left: 1px dotted red;
border-right: 1px dotted red;
width:100%;
height:100%;
}
When I do this I get the following result: www.wirelessguy.net/index2.php Any ideas on how to get the box to be made with negative margins? I would like to create a 2-column layout with a content area on the left and a "sidebar" area on the right. Pretty standard, right? Now the trick: on some pages, the sidebar will be absent, and I want the content area to then overflow the whole page width. I tried the following: Code: <div style="background-color: red; float: left;">content area text</div> <div style="background-color: blue; width: 200px; float: right;">sidebar text</div> When div #2 is excluded, div #1 of course expands to take up the whole page width. So that works. The problem is that when they're both present, and div #1 has a lot of text, it just pushes div #2 down a line. Note: The reason div #2 will sometimes not be present is that Drupal is generating the page, and plain leaves out div #2 if there's no content in it. It's not just empty -- it's not even included in the page. Can anyone help me accomplish this? I've looked at a lot of liquid layouts, but none seem to do quite this. I am working on this website : http://five-art.com and the code for the nav bar is : Code: <div class="content"> <table><tr><td><h1>[5]Art</h1></td><td class="navtop"> :: <a href="index.php">Call for Submissions</a> :: <a href="ms.php">Mission Statement</a> :: <a href="past.php">Event Archive</a> :: <a href="members.php">Members</a> :: <a href="contact.php">Contact Us</a>.</td></tr></table> </div> I added the table so that I could have two different font sizes without the text going to the next line. What would be the best way to do this with css. Thanks! Hello all. I have implemented a sort of 3 column layout on part of a site I'm working on: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#content {
line-height: 130%;
padding: 1em;
clear: both; } /* end #content */
#column_1 {
padding-left: 1em;
padding-right: 1em;
float: left;
background: red;
width: 33%; } /* end #column_1 */
#column_2 {
margin-left: 36%;
background: green;
padding-left: 1em;
padding-right: 1em;
width: 25%; } /* end #column_2 */
#column_3 {
float: right;
background: blue;
padding-left: 1em;
padding-right: 1em;
width: 33%; } /* end #column_3 */
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden; } /* end .clearfix:after */
.clearfix {display: block;}
/* Hides from IE5/Mac \*/
* html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE5/Mac */
</style>
</head>
<body>
<div id="content">
<div class="clearfix">
<div id="column_1">
<p>Column 1</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<div id="column_3">
<p>Column 3</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
<p>Line 6</p>
<p>Line 7</p>
</div>
<div id="column_2">
<p>Column 2</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
</div>
</div>
</body>
</html>
In FireFox and Safari, the colors line up but the text does not and in Opera the text lines up but the color does not. There's a rendering problem with IE that I will address later. The solution I would like to achieve would be to have the text and the colors lining up. What would be the best way to achieve this? Hello All, I've had great luck with this site helping out in the past. My main question I want to ask today is just to see if others think that I have layed out this page as efficiently, and as easy to work with cross-platform as I can. Because I'm having problems with IE on XP looking good with it, whereas it looks good on Mac. If you have suggestions of how to lay things out differently, I'd really appreciate it. Here's the site: http://www.genius-creative.com/index2.html Here's the attached CSS: http://www.genius-creative.com/geniusall.css Thanks a million! -Brandon I have attached an image that encapsulates ideally how I would like the page to look. I'm having troulbe having left nav, body text lining up. Basically I want the background of the center box to be white, but the wrapper is not "clearing" all the divs in the center box. So the bg appears black. I would also like the body color and left nav color to ALWAYS line up at the bottom. However they need to be able to strecth when content grows. Any help would be greatly appreciated! I'm pretty new to CSS and love it, but this has really got me stumped. View how I would "like" it to look http://urbaneffect.com/test/layers_image.gif View Page here http://urbaneffect.com/test/ CSS FILE Code:
/* this centers the content*/
#wrapper{
width: 765px;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
background-color:#FFFFFF;
}
#headerBlock{
z-index:2;
position:absolute;
top:0px;
margin-left:15px;
}
#bodyBlock{
position:absolute;
top:70px;
}
#leftNav{
width: 182px;
float: left;
height: 300px;
margin-right: 10px;
background-color:#666666
}
#innerContent {
float: left;
padding-left: 12px;
padding-top: 20px;
background-color:#FFCCCC;
width:550px;
}
Hi all, I have a problem with a website I am trying to build. The website is designed to be in three colums with the centre one containing the site content. Both the left and right column contain only a background image that provides the site good aesthetics. Below are links to diagrams of both how the site is currently displayed, and how i would like it to be displayed; http :// securetransaction .co .uk /orangepi /images /2.jpg http :// securetransaction .co .uk /orangepi /images /1.jpg Any help would be greatly apreciated, i can provide the current code if necessary. Cheers Hello on this page, the author shows a 3 Column Liquid Layout based on CSS percentage use. http://matthewjamestaylor.com/blog/perfect-3-column.htm The column layout is 2,1,3 (center page comes first in the html code). He states "The columns can also be configured to any other order if required." How to do the column configured as 1,2,3? (left, middle, right)? Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code: Code: <div style="position: absolute; top: 0px; left: 0px; width: 260px;"> <a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div> <div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;"> </div> Right now the header extends the browser width. Thanks in advance! Good Day All, I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all. http://029c92a.netsolhost.com/abrasives/cutmetalm.html Colin Hi all, I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest? I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix). Thanks very much for any pointers. Hi, I have made myself some ugly css code (just got started so this is my first try) that gives me a floating sidebar on my right side. This sort of works for IE6 (that most of my friends use) and I don't even dare to think about the look of it in another browser... So I would greatly appreciate some advice regarding improvements of the following code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
@media screen {
html {overflow:hidden;}
body {height:100%; overflow:auto; margin:0; padding:0; color: white;
background-color: #333;}
#container {position:fixed; margin-top:30px; margin-right:auto;
margin-bottom:30px; margin-left:auto; width: 1000px;
padding:10px; background-color: black; border: 1px solid
white;}
#header {position:fixed; margin-top: 0px; margin-right: 99px;
margin-bottom: 10px; margin-left: 99px; height:60px;
padding:0px; background-color:red; border: 1px solid white;}
#sidebar {position:relative; width:178px; height:150px; left:10px;
top:0px; padding:5px; background-color:blue; border: 1px
solid white;}
#intro {float:left; margin-top: 0px; margin-right: 0px; margin-bottom:
0px; margin-left: 0px; height:150px; width:788px; padding:5px;
background-color:green; border: 1px solid white;}
#content {margin-top: 10px; margin-right: 200px; margin-bottom: 10px;
margin-left: 0px; padding:5px; background-color:green; border:
1px solid white;}
#navbar {margin-top: 0px; margin-right: 99px; margin-bottom: 0px;
margin-left: 99px; height:75px; padding:0px; background-color:
red; border: 1px solid white;}
}
//-->
</style>
</head>
<body>
<div id="container">
<div id="header">A NICE HEADER</div>
<div id="intro">A USEFUL AREA FOR SECTION INTRODUCTION </div>
<div id="sidebar">TEST1<br>TEST2<br>TEST3</div>
<div id="content"><b>lot's of nasty things...</b>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="navbar">MY GLORIOUS NAVIGATION BAR</div>
</div>
</body>
regards /twinkle Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. |
|||||||