PDA

View Full Version : Layout with CSS


Bravat
02-16-2010, 09:10 PM
I need to make page layout as seen on picture. Every box is one picture and most of them are interactive. Just to say that i am very new to CSS and web design. If someone can explain me step by step you will help me a lot. Also how can i make scrollbar hidden in textarea (it need to be able to scroll down text). Did it with overflow:auto; but when text overflow scrollbar is there.

http://i46.tinypic.com/2chkgg5.jpg

domedia
02-16-2010, 09:22 PM
Hi Bravat, let's see if we can guide you through this.

First of all, if you make the site 1024 wide, you will most likely get horizontal scrollbars in a browser that is maximized in a 1024 screen resolution. Rememer that the browser chrome also takes up space.

Can you post your design instead?
The way you create elements in HTML, which are styled by CSS, is completely based on what the elements are, and since you're new at this I'm guessing that there might be some mistakes in how your site needs to be divided up.

gentleone
02-16-2010, 09:26 PM
I 'd suggest that you don't take a total width of 1024px. Users with these sreen resolution will get a horizontal scrollbar for sure. Just play it safe and take a width of 960px.

Furthermore there are heaps of good beginners tutorials on the net. Here's one that covers everything you should know when starting with web design.

http://articles.sitepoint.com/article/html-css-beginners-guide

Bravat
02-16-2010, 10:01 PM
I started to make layout using div tags, made #container, but when i start to put them in order, when i put the right pic the first two move to the bottom, and when i put next pic it goes after the right one, and i cann't make order as on picture.

tux
02-16-2010, 10:41 PM
As has been said above you should reduce your design to 960px wide.

Post your design so we can see what you are trying to achieve and everyone will be able to advise you more.

Bravat
02-16-2010, 11:16 PM
This is the design

http://i50.tinypic.com/xmtnjc.jpg

Pics on the left have rollover effect and there are also links. The center pics will contain text (need to insert transparent text area, use textarea or text field?), and one on the right will contain additional info.

domedia
02-17-2010, 12:12 AM
ok, I see a navigation list that could be an unordered list , UL and LI's.
And a background for the page. You're not really showing anything else. :)

Bravat
02-17-2010, 09:55 AM
Tnx a lot for help :D, working quite well now. How can i loose scroll bar in textarea (hide, but to enable text to scroll down)?

Bravat
02-17-2010, 11:39 AM
Another question, when i start to type text in the middle part, it does not stop at the end of div tag, instead it continuous to got all the way to the right. How can i stop this, and how can i put tex in two columns?

gentleone
02-17-2010, 11:44 AM
can you post your code (HTML & CSS) or a link, so that we can see what you have so far?

Bravat
02-17-2010, 12:23 PM
This is the code for now (sorry for RS, i have no other place to upload).

http://rapidshare.com/files/351860011/start.txt

gentleone
02-17-2010, 12:25 PM
This is the code for now (sorry for RS, i have no other place to upload).

http://rapidshare.com/files/351860011/start.txt

You can post your code here on the forum as well as long as you use the CODE tags.

Bravat
02-17-2010, 01:19 PM
Here it is.

<!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>Ripped World</title>
<style type="text/css">
<!--
#container {
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#D-Stub {
background-image: url(file:///F|/Video%20Tutoriali/Dreamweaver%20-%20Beggining/Project%20Files/TDWC4ES_P01_PF/Project%20Files%20-%20Dreamweaver%20CS4%20Es/Chapter%2006/Nature%20Photographer%20-%20CSS/POZADINA_03.jpg);
float: right;
height: 768px;
width: 240px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
#navbar {
float: left;
height: 537px;
width: 209px;
background-image: none;
}
#centar {
background-image: url(file:///F|/Video%20Tutoriali/Dreamweaver%20-%20Beggining/Project%20Files/TDWC4ES_P01_PF/Project%20Files%20-%20Dreamweaver%20CS4%20Es/Chapter%2006/Nature%20Photographer%20-%20CSS/POZADINA_05.jpg);
float: left;
height: 537px;
width: 497px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
padding-top: 0px;
padding-left: 48px;
padding-right: 30px;
padding-bottom: 0px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_04.jpg','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_06.jpg','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_07.jpg','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_08.jpg','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_09.jpg','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_10.jpg')">
<div id="container">
<div><img src="images/POZADINA_01.jpg" alt="001" width="208" height="150" class="float-left" /></div>
<div><img src="images/POZADINA_02.jpg" alt="002" width="576" height="150" class="float-left" /></div>
<div id="D-Stub"></div>
<div id="navbar" ><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_04.jpg',1)"><img src="images/POZADINA_04a.jpg" name="home" width="209" height="81" border="0" class="float-left" id="home" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_06.jpg',1)"><img src="images/POZADINA_06a.jpg" name="blog" width="209" height="104" border="0" class="float-left" id="blog" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('book','','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_07.jpg',1)"><img src="file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_07a.jpg" name="book" width="209" height="90" border="0" class="float-left" id="book" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pics','','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_08.jpg',1)"><img src="images/POZADINA_08a.jpg" name="pics" width="209" height="106" border="0" class="float-left" id="pics" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forum','','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_09.jpg',1)"><img src="images/POZADINA_09a.jpg" name="forum" width="209" height="76" border="0" class="float-left" id="forum" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('download','','file:///F|/Video Tutoriali/Dreamweaver - Beggining/Project Files/TDWC4ES_P01_PF/Project Files - Dreamweaver CS4 Es/Chapter 06/Nature Photographer - CSS/POZADINA_10.jpg',1)"><img src="images/POZADINA_10a.jpg" name="download" width="209" height="80" border="0" class="float-left" id="download" /></a></div class="float-left" >
<div class="float-right"> </div>
<div id="centar">dasdasdasdasdasdasdasdasd
</div><div class="float-left"><img src="images/POZADINA_11.jpg" width="784" height="81" /></div>
</div>
</body>
</html>

gentleone
02-18-2010, 11:01 AM
I believe you have to rethink the way you setup your layout. In your design I see a header, three colums and a footer, but what you're doing is kind of weird. You have a div with a float right, before your centar div which is floating to the left and some design images you just insert as images. Design images always set as backgrounds in your CSS. Only images that belongs to content, you insert in the HTML. CSS is al about keeping content and layout/design separate.

This is the coding that I would do with your design:

<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="sidebar-left"></div>
<div id="content"></div>
<div id="sidebar-right"></div>
</div> <!-- END MAIN -->
<div class="clear"></div>
<div id="footer"></div>
</div> <!-- END WRAPPER -->


The wrapper div, you center like in the tutorial on this site. I still recommend that you resize your design to 960px before you start slicing. Use an unordered list for your navigation. Use Listamatic as reference if you don't know how to do this (http://css.maxdesign.com.au/listamatic/). In the properties pane you can click on the unordered list icon and DW will insert the <ul> tags for this.

In your CSS you're floating the divs sidebar-left, content and sidebar-right all to the left, so that they line up next to each other. You set the widths and heights of your divs to the widths and heights of your sices and set them as background images in your CSS on those divs. You make a standard rule in your CSS - .clear (clear:both} - to clear your floats.

Bravat
02-18-2010, 05:18 PM
Tnx a lot for tips, really helped :D. Do you now how to loose scrollbar, but to be able to scroll text down? Also is it possible to format text in two columns?

gentleone
02-18-2010, 06:24 PM
Do you now how to loose scrollbar, but to be able to scroll text down?
There are JavaScript or Flash based alternatives.

Also is it possible to format text in two columns?
What do you mean with this? Style the text differently??? ... come again?

Bravat
02-18-2010, 08:43 PM
Something like in word, when text is divided into two or more columns, something like in the pic.

http://i45.tinypic.com/287zpzt.jpg

Bravat
02-18-2010, 09:16 PM
No luck with scrollbar. There is no possible way to hide scrollbar in textarea :(. When needed it will always be there.

gentleone
02-18-2010, 10:00 PM
No luck with scrollbar. There is no possible way to hide scrollbar in textarea :(. When needed it will always be there.

The 'only' (well... actually two... there's also the CSS property 'overflow:hidden', but this you don't want for text) to get no scrollbar in a div is to set no heights to your divs in your CSS. The content/text within that div will define the height, but this method won't work with your design because it needs a fixed height. So... or you gonna do a re-design, or you'll have to live with the scrollbars.

With javascript or flash you can get little arrows instead... that's what I meant earlier.

Formatting two columns? Yes you can... divide the content div in two columns.