PDA

View Full Version : Quite a fuzzy layout



DonSailieri
Mar 8th, 2008, 10:36 PM
Hey guys,

I just wanted to get some feedback / help with this layout:

saugi.pointclark.net/wobo

It's supposed to look like a comic page, but I'm no too happy about the css which is quite fuzzy with loads a' margins. Also, the bottom right looks crappy in IE for some reason. My questions are,

how can I improve this page?

Is there possibly a better approach to this kinda layout?

ps I also want a black border around the whole thing with a 3 px margin, not sure how to do that though (wrap layer?) Thanks in advance for ya help.

The sc:

<html>


<head>

<title></title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>




<body>


<div id="wrap">

<div id="heading">
<a href="index.php"><img src="img/heading.png"></a>
</div>

<div id="news">
<a href="news.php"><img src="img/news.png"></a>
</div>

<div id="gang">
<a href="gang.php"><img src="img/gang.png"></a>
</div>

<div id="zeitung">
<a href="zeitung.php"><img src="img/zeitung.png"></a>
</div>

<div id="archiv">
<a href="archiv.php"><img src="img/archiv.png"></a>
</div>

<div id="wobo">
<a href="wobo.php"><img src="img/wobo.png"></a>
</div>

<div id="impressum">
<a href="impressum.php"><img src="img/impressum.png"></a>
</div>

<div id="footing">
<?php include("footing.php"); ?>
</div>

</div>


</body>




</html>

and the css:

/*Div tags follow below*/

#heading {
width: 860px;
height: 150px;
border: 2px solid black;
}


#zeitung {
width: 400px;
height: 250px;
float: left;
margin: 1px 1px 1px 0;
border: 2px solid black;
}

#news {
width: 400px;
height: 130px;
float: left;
margin: 2px 1px 1px 0;
border: 2px solid black;
}

#gang {
width: 454px;
height: 300px;
float: right;
border: 2px solid black;
margin: 2px -4px 1px 1px;
}

#wobo {
width: 400px;
height: 250px;
float:left;
border: 2px solid black;
margin: 1px 1px 2px 0;
}

#archiv {
width: 454px;
height: 250px;
float:right;
margin: 1px -4px 1px 1px;
border: 2px solid black;
}

#impressum {
width: 454px;
height: 80px;
float: right;
margin: 1px -4px 2px 1px;
border: 2px solid black;
}

#footing {
width: 860px;
height: 65px;
margin: 1px 0 0 0;
border: 2px solid black;
background-image: url(img/footing.png);
clear: both;
}

#wrap {
width: 860px;
position: absolute;
left: 50%;
margin-left: -430px;
}

/*HTML tags follow below*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #fffff;
}

img {
display: block;
}

a img {
border: none;
}

/*classes follow below*/

Dan Schulz
Mar 8th, 2008, 11:55 PM
A few things off the top of my head.


Use a complete and proper DOCTYPE. I suggest you go with HTML 4 Strict here.
You have a list of links there. Rather than wrapping each link around a DIV, just mark the whole list up as an unordered list.
I don't know what those images are, but if it's just text on a background, you can use CSS to place the background on the link. If it's a custom font, then you can use an image substitution technique.

VIPStephan
Mar 9th, 2008, 03:34 AM
Some other things I noticed: You forgot to set a body background color. I’ve set my default browser background color to a light yellow and this way I see right away if people (or I) forget to set it. And you can never assume that a user has the same browser settings as you. Oh, and the same applies to text and link color, and font style/size. Always set thise things in the beginning if you care to have an equal look everywhere.

Also, I promise, your layout is way too fixed/static for a website. Unless you’re using overflow: auto; for each box I’ll see major problems coming at you sooner or later. Even if you watch out to keep the amount of text sufficient for the boxes you can never know what font size the user will have. People can easily resize their text size with “Control” and “plus” or “minus” (in Firefox & Safari), and it won’t be much of a reading pleasure that way. And especially as school/public institution you should have accessibility (http://de.wikipedia.org/wiki/Barrierefreies_Internet) in mind.

Don’t design your page so that the content has to adapt to the layout, design your page to adapt to the content (that means you need some content before you start styling a page).

DonSailieri
Mar 10th, 2008, 03:35 AM
First of all thanx for your answers guys,

Just for clearing the purpose of the site: each div/link is on picture without text on it, so the index is pretty much static (apart from some php stuff in the footer that'll be added later). Each links then leads to a new site with dynamic and static content looking like:

------------------------------------------------------
Header
------------------------------------------------------
............................................................................
Content
Content
Content
Content
Content
Content
............................................................................
------------------------------------------------------
Footer
------------------------------------------------------

pretty straightforward. I'll have a look at the doctype soon, the background color for the body is set to #ffffff.

My question is just for another apporach to this comicbook layout. as u can c in the css, I had to do a lot of finetuning with margins (which is pretty ugly imo) and still somethings wrong with the bottom right when viewed in IE (Why?).

Also, about the wrap. I want a black solid margin with a 3px padding aruond the whole site (to make it look like a comic page...) but I'm still not sure how to realize that (wrap div...?).

Thx,

Don