Forum Moderators: not2easy
** I *****
----------
** I *****
** I *****
** I *****
The top-left would be for the logo, the bottom-left would be navigation, the bottom-right would be for a large photo, and the top-right would house the title of the photograph. (The dashes and Is are a border.)
The navigation links won't go as far down as the image's full height and neither will the title, so I'm trying to code it in a way that the borders will follow the picture.
I think it's a fairly basic layout, but I guess my CSS skills aren't what they've used to be and I'm facing many issues. I could list them all but I think it would be better to just post all that I've got and listen to all your input. Thanks for reading!
STYLE SHEET:
<style type="text/css">
<!--
body {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
padding: 0px;
}
div#logo {
background-color:#021080;
float: left;
height: 100px;
width: 100px;
text-align: center;
border-bottom-width:12px;
border-bottom-style: solid;
border-right-width:12px;
border-right-style: solid;
}
div#header {
background-color:#561080;
height: 100px;
width: 620px;
text-align: center;
border-bottom-width:12px;
border-bottom-style: solid;
}
div#nav {
background-color: #008080;
width: 100px;
height: 760px;
float: left;
margin-right: 10px;
border-right-width:12px;
border-right-style: solid;
}
div#main {
margin-top: 10px;
}
-->
</style>
******END********
PAGE CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="newstylesheet.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<img src="http://www.example.com/image/"></div>
</div>
</body>
</html>
[edited by: swa66 at 1:03 am (utc) on Dec. 8, 2008]
[edit reason] sideway scroll, use example.com, it cannot be owned [/edit]
A quick one:
Your stylesheet does not need the html tags (it can start with "
body { ...}Could you elaborate a bit on what you want to happen on viewports wider than the image or when the image is wider than the viewport ?
Currently your header has a fixed width, do you intend to have that, or are you saying you want it to be the same as the width of the image ? (Not the easiest of things to do)
Understanding a bit better what you seek to achieve helps a lot in understanding what's "wrong".
Basically, I'm trying to get a layout like I asterisk-ed above that works properly; something so that I don't need to drastically alter the code for each new image that's uploaded on the layout.
So there would a set layout that wouldn't change (the 100x100 logo stays put, the header beside it would only consist of text for the title of the current image, and the navigation would only change when I add links), then there would be the image beside the nav. and under the header. The image would deviate between horizontal and vertical images on a frequent basis.
Now, what I'm trying to do is have a layout that will grown with the image. That's because I want the border (the -s and Is in the asterisk layout) to reach then entire distance between the top-bottom of the left side, and the entire top.
I need a layout that will automatically grow with the image.
The code above exemplifies an end result that is perfect but flawed as a usable layout. The code includes set width and height for the header and navigation, respectively, but in the final layout it should conform to the exact dimensions of the picture. The 100x100 logo stays the same. Again, visually, the outcome of the above code is what I'm aiming for, but it won't work as the layout I'm trying to get now (I would need to alter the code yet again to suit a different sized image).
(I don't know what a viewport is.)
Thanks for all your suggest thus far. :)
