/    Sign up×
Community /Pin to ProfileBookmark

CSS layout control, image for border question

Copy linkTweet thisAlerts:
Nov 26.2005

Hi there, I have been a PHP coder for some years now and I have decided that since I am getting back into the developing field starting next month that I was going to look around at the new stuff out since I last updated my methods. One of the main things I have seen change is the Table-less layout, this is something VERY new to me, I been messing around with it and have one question that i have not been able to find the anwser to. When I use to use tables for my layouts I would go into fireworks and design a nice looking graphical border that I would then chop up into 8 very small pieces, all four corners and then a 2-3 px wide slice from each of the four sides, I would then but those as the backgrounds of the tables so that my Menus and other table blocks would have a nice looking graphical border, I see this done almost everywhere. My question is how would I do this with CSS layout? an example would be my test site [url]http://deletethekernel.com[/url]

I want to use small images to save bandwidth and I would hate to have to make graphics for each menu / conent area and have the entire background of the DIV be 1 image. Any help would be awesome. Thanks in advanced.

PS. when people say table less layouts, are they really saying NO tables on the site? or would I still consider using tables in my menu’s to seperate the links? and what about with a news blog?

Thanks again

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangNov 26.2005 — [URL=http://www.google.com/search?sourceid=navclient-ff&ie=UTF-8&rls=GGGL,GGGL:2005-09,GGGL:en&q=css+rounded+corners]CSS rounded corners[/URL]

tables are for [B]tabulated data[/B], not for layout nor menu's.

menu's are usually done with [URL=http://www.htmldog.com/articles/suckerfish/dropdowns/]lists[/URL]
Copy linkTweet thisAlerts:
@cafrowauthorNov 26.2005 — thank you for that reply, I am messing around with info right now, I can get the corners to work now I am trying to figure out a way to make the four sides show up the way I want. I never knew how powerfull CSS is.
Copy linkTweet thisAlerts:
@cafrowauthorNov 27.2005 — I just wanted to post what I had been working on and see if I am doing this correctly or if there is a cleaner way of doing this. I have uploaded it here http://deletethekernel.com/new/ and post the code below.

CSS File:
[code=php]
.side_nav {
background-color: #FFFFFF;
position:absolute;
left: 5%;
top: 150px;
width:150px;
border: none;
border-style: none;
border-color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
.side_nav_top
{
background: url(image/top_right.jpg) no-repeat top right;
}
.side_nav_top div
{
background: url(image/top_left.jpg) no-repeat top left;
}
.side_nav_bottom
{
background: url(image/bottom_left.jpg) no-repeat bottom left;
}
.side_nav_bottom div
{
background:url(image/bottom_right.jpg) no-repeat bottom right;
}
.side_nav_top div, .side_nav_top, .side_nav_bottom div, .size_nav_bottom {
width: 100%;
height: 14px;
font-size: 1px;
}
.menu_buttons
{
background:#FFFFFF;
position:relative;
left: 10px;
width: 130px;
font-weight:bold;
}
.menu_buttons:hover
{
background:#CCCCCC;
}

.top_nav {
background-color: #FFFFFF;
position:absolute;
left: 5%;
top: 10px;
width:700px;
border: none;
border-style: none;
border-color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
.top_nav_top
{
background: url(image/top_right.jpg) no-repeat top right;
}
.top_nav_top div
{
background: url(image/top_left.jpg) no-repeat top left;
}
.top_nav_bottom
{
background: url(image/bottom_left.jpg) no-repeat bottom left;
}
.top_nav_bottom div
{
background:url(image/bottom_right.jpg) no-repeat bottom right;
}
.top_nav_top div, .top_nav_top, .top_nav_bottom div, .top_nav_bottom {
width: 100%;
height: 14px;
font-size: 1px;
}
body
{
background:#CCCCCC;
}
[/code]

HTML File:
[code=php]
<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="top_nav">
<div class="top_nav_top"><div></div></div>
<h1>DeleteTheKernel.com</h1>
<div class="top_nav_bottom"><div></div></div>

</div>
<div class="side_nav">
<div class="side_nav_top"><div></div></div>
<div class="menu_buttons">
News
</div>
<br />
<div class="menu_buttons">
Image Gallery
</div>
<br />
<div class="menu_buttons">
Forums
</div>
<div class="side_nav_bottom"><div></div></div>
</div>
</body>
</html>

[/code]
×

Success!

Help @cafrow spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...