|
 |
|
|
11-02-2007, 10:57 PM
|
CSS Layout
|
Posts: 18
Name: Kevin
|
Hello ladies and gents,
I just recently taught myself the basics of creating a page layout using CSS. Phase 1 complete. My questions is if someone could help me with a particular layout. I saw the source code of a site that had everything that looked like it was aligned left but when it was published it was correctly aligned where it was supposed to go.
Can someone please give me a brief overview or even a short CSS code that would show how that is done? Any help would be greatly appreciated!
|
|
|
|
|
11-02-2007, 11:10 PM
|
Re: CSS Layout
|
Posts: 6,442
Name: James
Location: In the ocean.
|
Sorry but I am not sure exactly what you mean. Do you have some code or links? Or perhaps explain more in-depth?
|
|
|
|
|
11-03-2007, 12:16 AM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SitecDesign - design studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="styles/style.css" rel="stylesheet" type="text/css">
<meta name="keywords" CONTENT="sitec,designs,sitec designs,web design,web graphics,graphics,flash,banner design,AVS design,TGP design,CJ2 design,logo design,button design,non-adult design,non adult design,paysite design,paysite,full page ad design,site design,graphic design,web graphics,page design,web page design,portfolio,cheap web design,professional web design,hi-end web design">
</head>
<body>
<div class="div_menu">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><img src="images/header_logo.gif" width="76" height="78" border="0"></td>
<td id="text_big_blue" valign="middle"><b>Sitec</b>Design</td>
<td><img src="images/header_separator.gif" width="36" height="78" border="0"></td>
<td id="text_normal_blue" nowrap>Web-Sites in the best adult traditions</td>
<td width="100%" align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="td_button_sel" valign="middle" id="text_big_white" nowrap>Home</td>
<td><img src="images/spacer.gif" width="3" height="1" border="0"></td>
<td class="td_button" valign="middle" id="text_big_white" nowrap><a href="about_en.htm">About</a></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0"></td>
<td class="td_button" valign="middle" id="text_big_white" nowrap><a href="portfolio_en.htm">Portfolio</a></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0"></td>
<td class="td_button" valign="middle" id="text_big_white" nowrap><a href="price_en.htm">Price</a></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0"></td>
<td class="td_button" valign="middle" id="text_big_white" nowrap><a href="links_en.htm">Resources</a></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0"></td>
<td class="td_button" valign="middle" id="text_big_white" nowrap><a href="contacts_en.htm">Contacts</a></td>
<td><img src="images/spacer.gif" width="15" height="1" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style="background-image:url(images/header_back.jpg); background-repeat:repeat-x; background-position:top;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/header_1.jpg" width="185" height="93" border="0"></td>
<td><img src="images/header_2.jpg" width="219" height="93" border="0"></td>
<td><img src="images/header_3.gif" width="208" height="93" border="0"></td>
<td width="100%" class="div_header7"><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr>
<td><img src="images/header_4.gif" width="185" height="128" border="0"></td>
<td><img src="images/header_5.gif" width="219" height="128" border="0"></td>
<td><img src="images/header_6.gif" width="208" height="128" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr>
<td><img src="images/header_8.gif" width="185" height="97" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
</table>
<div class="div_lang">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="index_ru.htm"><img src="images/flag_ru.gif" width="33" height="23" border="0"></a></td>
<td id="text_normal_green" style="padding: 0 0 0 10;"><a href="index_ru.htm">Ru</a></td>
<td><img src="images/sep_2.gif" width="25" height="31" border="0"></td>
<td><img src="images/flag_en.gif" width="33" height="23" border="0"></td>
<td id="text_normal_green" style="padding: 0 0 0 10;">En</td>
</tr>
</table>
</div>
<div class="div_so">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="right"><img src="images/header_so_left.gif" width="78" height="221" border="0"></td>
<td background="images/header_so_back.gif" width="100%" valign="top" style="padding: 30 15 0 0;">
<p class="text_big">Our special offer!</p>
<p id="text_normal_1">
Now we also provide additional service: blogs and forum’s launching
</p>
<img src="images/spacer.gif" width="235" height="1" border="0">
</td>
</tr>
</table>
</div>
</div>
<div class="div_main">
<p class="text_vbig">Welcome to the world of boundless fantasy and creativeness!</p>
<p id="text_normal_1">Sitecdesign team is glad to cheer you! We will be pleased if you stop tiring searching and make your order in our studio. As for us we will do our best to absolutely satisfy your every wish.</p>
<p id="text_normal_1">Being our client brings you the best result and satisfaction of working with us as we resolutely base our work on the three foundations of business:</p>
<table border="0" cellspacing="0" cellpadding="0" width="100%;">
<tr>
<td valign="top"><img src="images/icon_quality.gif" width="38" height="77" border="0"></td>
<td width="30%" valign="top" style="padding: 10 10 0 10;">
<p class="text_big_blue" style="margin: 0 0 10 0; padding: 0;">Quality</p>
<p id="text_normal" style="text-align:justify; margin: 0; padding: 0;">
Our team completed with professionals only, greatly experienced in adult as well as in mainstream design.<br>
Watch our portfolio to become sure in originality of every work, and technique of performance will not leave you any doubts.
</p>
</td>
<td valign="top"><img src="images/icon_stability.gif" width="42" height="77" border="0"></td>
<td width="30%" valign="top" style="padding: 10 10 0 10;">
<p class="text_big_blue" style="margin: 0 0 10 0; padding: 0;">Reliability</p>
<p id="text_normal" style="text-align:justify; margin: 0; padding: 0;">Time is money. And good name is not only the first impression but also the results which surely will make you contented. That’s why when you make an order in our studio be sure that your project will be done in the time you settled for it.</p>
</td>
<td valign="top"><img src="images/icon_friendly.gif" width="42" height="77"></td>
<td width="30%" valign="top" style="padding: 10 10 0 10;">
<p class="text_big_blue" style="margin: 0 0 10 0; padding: 0;">Politeness</p>
<p id="text_normal" style="text-align:justify; margin: 0; padding: 0;">
Our friendly support service will pleasantly surprise you by its’ polite communication, efficiency and professionalism in taking your order.
Please contact us:
<br><br>
<img src="http://online.mirabilis.com/scripts/online.dll?icq=103253808&img=5" width="18" height="18" border="0" align="absmiddle"> <b>103253808</b> - Raptor<br>
<img src="http://online.mirabilis.com/scripts/online.dll?icq=442774750&img=5" width="18" height="18" border="0" align="absmiddle"> <b>442774750</b> - SitecSupport<br>
</p>
</td>
</tr>
</table>
<br>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td valign="top" bgcolor="#FFFBEE"><img src="images/portfolio_left.gif" width="24" height="226" border="0"></td>
<td width="100%" valign="top" class="td_block_1">
<p class="text_big_brown">Our last works</p>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0 15 0 0;">
<table border="0" cellspacing="0" cellpadding="0" class="table_site">
<tr>
<td valign="top" align="left" style="padding: 11 0 0 11;"><a href="portfolio/cj/teenbe.com/index.png" target="_blank"><img src="portfolio/cj/teenda.com/thumb.jpg" width="124" height="104" border="0"></a></td>
</tr>
<tr>
<td height="38" align="center" valign="middle" id="text_small_brown"><a href="portfolio/cj/teenbe.com/index.png" target="_blank"><img src="images/icon_zoom.gif" width="19" height="22" border="0" align="absmiddle">Full size</a></td>
</tr>
</table>
</td>
<td style="padding: 0 15 0 0;">
<table border="0" cellspacing="0" cellpadding="0" class="table_site">
<tr>
<td valign="top" align="left" style="padding: 11 0 0 11;"><a href="portfolio/cj/hohoteens.com/index.png" target="_blank"><img src="portfolio/cj/hohoteens.com/thumb.jpg" width="124" height="104" border="0"></a></td>
</tr>
<tr>
<td height="38" align="center" valign="middle" id="text_small_brown"><a href="portfolio/cj/hohoteens.com/index.png" target="_blank"><img src="images/icon_zoom.gif" width="19" height="22" border="0" align="absmiddle">Full size</a></td>
</tr>
</table>
</td>
<td style="padding: 0 15 0 0;">
<table border="0" cellspacing="0" cellpadding="0" class="table_site">
<tr>
<td valign="top" align="left" style="padding: 11 0 0 11;"><a href="portfolio/cj/inter-show.com/index.png" target="_blank"><img src="portfolio/cj/inter-show.com/thumb.jpg" width="124" height="104" border="0"></a></td>
</tr>
<tr>
<td height="38" align="center" valign="middle" id="text_small_brown"><a href="portfolio/cj/inter-show.com/index.png" target="_blank"><img src="images/icon_zoom.gif" width="19" height="22" border="0" align="absmiddle">Full size</a></td>
</tr>
</table>
</td>
<td style="padding: 0 15 0 0;">
<table border="0" cellspacing="0" cellpadding="0" class="table_site">
<tr>
<td valign="top" align="left" style="padding: 11 0 0 11;"><a href="portfolio/cj/teenbin.com/index.png" target="_blank"><img src="portfolio/cj/teenbin.com/thumb.jpg" width="124" height="104" border="0"></a></td>
</tr>
<tr>
<td height="38" align="center" valign="middle" id="text_small_brown"><a href="portfolio/cj/teenbin.com/index.png" target="_blank"><img src="images/icon_zoom.gif" width="19" height="22" border="0" align="absmiddle">Full size</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="td_portfolio_adult" align="left" valign="middle" id="text_normal_green" width="155" bgcolor="#DEF1C7">Adult portfolio:</td>
<td bgcolor="#DEF1C7" id="text_normal_green"><a href="portfolio/cj.htm">CJs, TGP & MPG</a> | <a href="portfolio/linklists.htm">Link lists</a> | <a href="portfolio/catalogs.htm">Catalogs</a> | <a href="portfolio/blogs.htm">Blogs</a> | <a href="portfolio/banners.htm">Banners</a> | <a href="portfolio/icons.htm">Icons</a> | <a href="portfolio/logos.htm">Logos</a> | <a href="portfolio/paysites.htm">Pay sites</a> | <a href="portfolio/other.htm">Other</a></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="1" height="2" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="2" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
<p class="text_big">Decided to make an order?</p>
<p id="text_normal_1">Reason decision which will not make you feel regret. <br>To make an order you simply need to contact one of our managers by ICQ or via e-mail. Our contacts are:</p>
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td id="text_normal_1"><b>Raptor:</b></td>
<td id="text_normal_1"><b>SitecSupport:</b></td>
</tr>
<tr>
<td id="text_normal_1"><img src="http://online.mirabilis.com/scripts/online.dll?icq=103253808&img=5" width="18" height="18" border="0" align="absmiddle"> <b>103253808</b><br><img src="images/mail_raptor.gif" width="144" height="19" border="0"></td>
<td id="text_normal_1"><img src="http://online.mirabilis.com/scripts/online.dll?icq=442774750&img=5" width="18" height="18" border="0" align="absmiddle"> <b>442774750</b><br><img src="images/mail_support.gif" width="152" height="19" border="0"></td>
</tr>
</table>
<p class="text_big">Our partners:</p>
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td><a href="http://www.xbiz.com"><img src="images/banners/xbiz_globe.gif" width="120" height="60" border="0"></a></td>
<td><script language="JavaScript" type="text/javascript" src="http://www.pimpcafe.com/buttons.php"></script></td>
<td><a href="http://www.CozyFrog.com"><img src="images/banners/cfrog12060.gif" width="120" height="60" border="0"></a></td>
</tr>
</table>
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<a href='http://www.liveinternet.ru/click' "+
"target=_blank><img src='http://counter.yadro.ru/hit?t26.6;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число посетителей за сегодн\я' "+
"border=0 width=88 height=15><\/a>")//--></script><!--/LiveInternet--> <div class="div_footer"><img src="images/footer.gif" width="442" height="227" border="0"></div>
</div>
</body>
</html>
Specifically something like this.. you'll notice if you put it in code everything is just straight down but when you look at it on the site it looks normal.
The "footer.gif" is in the bottom right hand of the screen but they are still able to put text to the left of that. Dunno how to duplicate that. |
|
|
|
|
11-03-2007, 12:23 AM
|
Re: CSS Layout
|
Posts: 6,442
Name: James
Location: In the ocean.
|
At the top of the code is this line
<link href="styles/style.css" rel="stylesheet" type="text/css">
that links to their style sheet
http://www.sitecdesign.com/styles/style.css
The style.css file is where they perform the "alignment". |
|
|
|
|
11-03-2007, 01:30 AM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
wow....
First off thanks for the help now I can see how they did it.
I can make a basic 3 column layout, that looks like something way over my head. Honestly is it as hard to learn as it looks? I mean they have the footer way up in the main div.
|
|
|
|
|
11-07-2007, 03:04 PM
|
Re: CSS Layout
|
Posts: 6
Name: Michael Smith
|
Yes, just open the CSS file with Macromedia Dreamweaver and you'll be able to see all the options available. Just do a little bit of experimentation with the file and you will soon discover how to use the various options to format almost anything in your website that uses style from that CSS file. I did the same and I learned by experimentation.
Regards,
Michael Smith.
|
|
|
|
|
11-07-2007, 03:07 PM
|
Re: CSS Layout
|
Posts: 6
Name: Michael Smith
|
Once you have learned all the nitty-gritty details of manipulating the CSS file, you will find that formatting anything within your website whether it be text or links will be a breeze. Just change that particular style within the CSS file and the changes will be reflected everywhere on your website.
|
|
|
|
|
11-08-2007, 02:31 PM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
Thanks fella's,
I've been messing with this for a couple days and it looks like a mess in dreamweaver with everything laying on top of each other but when previewed it actually looks right.
Another question I have now that I'm knee deep into it... My footer. I tried absolute positioning with 0 for bottom and it doesn't seem to work as I hopped. Would anyone be able to shed some light on what I could try?
|
|
|
|
|
11-09-2007, 02:19 PM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
to give you more of an idea of what I'm talking about here is the link in question.
I don't have the CSS linked to an external cause i am pretty much just messing around to try and understand this a little better so please be gentle when criticizing my code lol.
http://www.bbpdesigns.com/clients/bbpdesigns/home.html
the footer at the bottom, I finally almost got it where I want it but then I noticed if you shrink your browser window so far the text actually goes behind the footer. |
|
|
|
|
11-12-2007, 05:03 PM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
OK,
So I've figured out if i make my footer relative it stays on the bottom, and if I make the content relative, it also stays where I want it... Now the problem is the huge space between the two that I cannot seem to get rid of.
The more I play with this the more I understand it but if I could get some help understanding what I did wrong that would be great.
example of what I'm working on can still be found at http://www.bbpdesigns.com/clients/bbpdesigns/home.html |
|
|
|
|
11-12-2007, 07:41 PM
|
Re: CSS Layout
|
Posts: 10,017
Location: Tennessee
|
You told it you wanted it to be 100% high.. so it is.
Quote:
* html #nonFooter
{
height: 100%;
}
|
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
11-12-2007, 11:29 PM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
Quote:
Originally Posted by LadynRed
You told it you wanted it to be 100% high.. so it is.
|
Tried it, doesn't work |
|
|
|
|
11-13-2007, 07:53 AM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
it looks like to me that the gap is there because the content is taking up just as much space as it would if it were not positioned where i want it.
|
|
|
|
|
11-13-2007, 02:49 PM
|
Re: CSS Layout
|
Posts: 10,017
Location: Tennessee
|
That's not it. I haven't figured it out yet, I hate tables and I'm gonna bet that's where the problem lies. I'm trying to figure it out.
If you're going to build websites for a living, you need to learn to get AWAY from tables for layout, they're soooooooo 1995.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
11-13-2007, 05:24 PM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
Yeah, I'm in school now for web development and just recently found out about pure css layouts. When I realized everyone was saying tables were obsolete i got to thinking... They're still teaching us to use tables for layouts in school, to me this will only negatively effect me in the future.
I appreciate the help on trying to correct the problem and I'm trying to use tables less and less. So instead of breaking down an image, would it be more efficient to keep the image whole and just place it in a div tag of it's own?
|
|
|
|
|
11-14-2007, 03:19 PM
|
Re: CSS Layout
|
Posts: 10,017
Location: Tennessee
|
Quote:
|
They're still teaching us to use tables for layouts in school
|
Unfortunately this is true all over the US and probably most other countries.
Quote:
|
So instead of breaking down an image, would it be more efficient to keep the image whole and just place it in a div tag of it's own?
|
Generally, yes. For the big curve you've got, I'd use a div and stick the curve in as a background on the div.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
12-03-2007, 10:25 AM
|
Re: CSS Layout
|
Posts: 18
Name: Kevin
|
Quote:
Originally Posted by LadynRed
Unfortunately this is true all over the US and probably most other countries.
Generally, yes. For the big curve you've got, I'd use a div and stick the curve in as a background on the div.
|
Yeah so my teacher isn't very much help and is saying "i know how to do it but I want you to figure it out"
I am pretty advanced for the class I'm taking but I really have no idea how to solve this. The only thing she told me is that it has to do with white space.
If someone could help me figure this out I would GREATLY appreciate it. My head is about to explode and I'm sure it is something ridiculously easy.
-Kevin |
|
|
|
|
|
« Reply to CSS Layout
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
