css tutorial question (tables to css,divs)
#1
Posted 30 July 2005 - 10:01 AM
#nav_mid{
background-color: #3d3d3d;
border: 1px solid #181818;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #C1C4C6;
this is for a navigation box with a stroke as borders
but what if you have images as borders?
#2
Posted 30 July 2005 - 10:23 AM
The only way is to create one main dive to rap around three sub divs top make the top middle and botton of the border. So the top div will have the border image for the top of the box, the middle box will have a repeating bacground image for the left and right border and the bottom will have the bottom border image.
So with the top, middle and botton divs mergerded should form a seamless border. Hope you understood what I was saying there.
#3
Posted 30 July 2005 - 10:36 AM
#4
Posted 30 July 2005 - 11:06 AM
#5
Posted 30 July 2005 - 11:19 AM
i have a navigation box with a header pic and footer
i know how to do this because it's all in the tutorial of tables to css,divs
only thing is,i have custom borders for the nav boxes,and i don't want a simple 1 px stroke,but a streching image
background-color: #202020;
border: 1px solid #000000;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #808080;
that's in the css,as you see it's a 1 px border (directly token from the tutorial)
hope that helps
#6
Posted 30 July 2005 - 12:35 PM
#7
Posted 30 July 2005 - 12:40 PM
<!--BANNER PART--> <div id="banner"><img src="images/header.jpg" width="800" height="128" alt="Banner" /></div> <!--NAVIGATION PART--> <div id="left"> <!--NAVIGATION TOP--> <div id="nav_top"><img src="images/navigation.gif" width="145" height="25" alt="Navi Top" /></div> <!--NAVIGATION MID (CONTENT)--> <div id="nav_mid"> :: <a href="#">Home</a><br /> :: <a href="#">Downloads</a><br /> :: <a href="#">Forum</a><br /> :: <a href="#">Members</a><br /> :: <a href="#">Staff</a><br /> :: <a href="#">Contact us</a><br /> :: <a href="#">Link goes here</a><br /> :: <a href="#">Link goes here</a><br /> :: <a href="#">Link goes here</a><br /> :: <a href="#">Link goes here</a><br /> :: <a href="#">Link goes here</a> </div> <!--NAVIGATION BOTTOM--> <div id="nav_btm"><img src="images/footer.gif" width="145" height="16" alt="Footer" /></div> </div> <!--END LEFT FLOAT-->
this is a piece of the index.html
can i do anything here to have a strechable border?
#8
Posted 30 July 2005 - 12:50 PM
In #nav_mid us this:
#nav_mid{ background: url(path/to/your/image/for/background.gif) repeat-y #3d3d3d; font-family: Verdana, arial, sans-serif; font-size: 10px; color: #C1C4C6; }NOTE: your background image needs to be the same size in width fo your #nav-mid box. So set a default size for your#nav_mid box an you should get your background image repeating down wards.
Edited by softLearner, 30 July 2005 - 01:03 PM.
#9
Posted 30 July 2005 - 12:56 PM
#10
Posted 30 July 2005 - 01:04 PM
#11
Posted 30 July 2005 - 01:10 PM
the border on the right side of the box? it streches perfectly without bugs at the left side,how do i also make the border appear on the right side?
oh and also,the text overlaps the border? how do i fix that? with a margin or something?
(ya i know,very new to coding )
#12
Posted 30 July 2005 - 01:15 PM
Example:
padding-left: 5px;
padding-right: 5px;
As for the border, why isnt it showing up? does your new background overlap it? A screenshot and/or link may help us review the issue at hand.
#14
Posted 30 July 2005 - 01:22 PM
width: 150px;
(changing it of course to your nav's width)
#15
Posted 30 July 2005 - 01:28 PM
#16
Posted 30 July 2005 - 01:35 PM
I've tested this out real quick and I dont seem to have a problem with the border like this x_x
perhaps if I show what I did for the quick test:
<html> <head> <title>border_test</title> <style type="text/css"> #nav_mid{ width: 150px; background: url(path/to/your/image/for/background.gif) repeat-y #3d3d3d; font-family: Verdana, arial, sans-serif; font-size: 10px; color: #C1C4C6; border: 1px solid #ff00ff; } </style> </head> <body> <div id="nav_mid"> :: <a href="#">Home</a><br /> :: <a href="#">Downloads</a><br /> :: <a href="#">Forum</a><br /> :: <a href="#">Members</a><br /> :: <a href="#">Staff</a><br /> :: <a href="#">Contact us</a><br /> :: <a href="#">Link goes here</a><br /> :: <a href="#">Link goes here</a><br /> :: <a href="#">Link goes here</a><br /> :: <a href="#">Link goes here</a><br /> :: <a href="#">Link goes here</a> </div> </body> </html>
Also as a bit of a sidenote, if for some reason or another the border still refuses to co-operate. As an idea you could draw a 1px border like that on your background image itself
#17
Posted 30 July 2005 - 01:52 PM
width: 145px;
background: url(images/border.gif) repeat-y #202020;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #808080;
that's the the css for the nav_mid :\
<!--NAVIGATION MID (CONTENT)-->
<div id="nav_mid">
:: <a href="#">Homez</a><br />
:: <a href="#">Downloads</a><br />
:: <a href="#">Forum</a><br />
:: <a href="#">Members</a><br />
:: <a href="#">Staff</a><br />
:: <a href="#">Contact us</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a>
</div>
that's the html that redirects to the nav_mid
it looks like i just included one pic of the border as a background?
wouldn't the solution be that i include 2 pics of it (my original idea wasn't even as a background,but then again i'm a newb:P)
#18
Posted 30 July 2005 - 01:58 PM
make your background image as wide as your nav_bar (aka 145px;) then on the left side-make the left border, and on the right side of it make the right border.
I hope that was understood easily, but yea the background-image has to be the same width of the div you're trying to use it on.
Also sidenote: dont forget the closing css } bracket.
#19
Posted 30 July 2005 - 02:02 PM
your saying that i have to create a |border|bgcolor|border| pic myself and use that as a bg,and paddings so it looks like a border but is actually one pic?
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users