PDA

View Full Version : can i do this with CSS?


dsnyder
04-21-2007, 04:02 PM
Im trying to figure out how to do this with css. Is it possible?

I am using a .container to display a bottom image, .container p to display right/left borders, & .container h2 to display top image. I have a image floated w/in the <p> and Id like to have a list of links to the left of the image and <p> element. (Ive moved the <p> over using padding-left of 155px.
See the grey box http://cellocelli.com/test2.htm
Is it possible to include a list of links within that area left of the picture & text using css?

.containerBottom {
width: 520px;
float: left;
background-color: #758279;
background-image:url(../Images/BkGrd/bg_bottom.gif);
background-repeat: no-repeat; background-position: bottom;
margin-bottom: 20px;
}

.containerBottom p {
font: normal 1.2em Verdana;
line-height:150%;
color: #fff;
margin:0px;
padding: 5px 10px 5px 155px;
border-left: 1px solid #333; border-right: 1px solid #333;
}

.containerBottom h2 {
color:#fff;
font-size: 1.3em;
padding: 15px 14px 15px 12px;
margin: 0px;
text-align: left;
background-image:url(../Images/BkGrd/bg_top.gif);
background-repeat: no-repeat; background-position: right top;
}

.containerImage {
margin-right: 13px;
margin-bottom: 4px;
float:left;
background-color:#CCCCCC;
outline:1px solid #000;
}

dsnyder
04-21-2007, 11:54 PM
added another floating element before the image or the text and things work just fine.

Andromeda
04-22-2007, 04:23 AM
Did you get your previous problem sorted?

Wish I could help you but I'm still trying to get to grips with css myself.

It's quite interesting watching your web site developing. :grin:

dsnyder
04-22-2007, 03:33 PM
It's quite interesting watching your web site developing.Tell me about it! A couple of weeks ago I knew next to nothing about site design or no stinkin' CSSing. Thanks for looking in.
This current problem has been resolved which has shown a new issue :-D.
Any thoughts?

Regarding the text on the right side of my colored box: http://cellocelli.com/test2.htm Id like to style the text in the bottom differently from the top. Id like to create a 1px top border with a color of my choosing rather than my current method or manually typing in a line than receives the color on text. My problem is that the side borders of the box come from the <p> element. Disturbing that element to restyle the bottom text creates a gap in the boxes side border. Can I somehow float another element w/in the <p> to style the bottom text and give it a border-top?

2. Separate IE issue: IE seems to create a gap between my h2 (which has my top image) & the side borderlines in my <p> element. IE also is overriding my link values for the div class with other values.

New floated element which hold the image & links
.containerList {
color: #fff;
width: 140px;
height:100%;
margin:0px 10px 10px 5px;
padding: 5px;
float:left;
border-right: 1px solid #ABB4A9;
}

.containerList h6 {
color:#fff;
padding-top:5px;
font-weight:bolder;
font-size: 1.2em;
margin:0px;
}

.containerList a {
color:#ABB4A9;
font-size: 1.2em;
padding:.2em .6em;
text-decoration:underline;
}