16 replies [Last post]
trond.rud
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

I am using this layout as a base:http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
and will like to use the snazzy rounded corners as an outer div.http://www.cssplay.co.uk/boxes/snazzy.html This is the markup and css:

CSS CODE
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }


**HTML CODE**

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">

</div>
<div id="rightnav">

</div>
<div id="content">
<h2>Subheading</h2>

</div>
<div id="footer">
Footer
</div>
</div>

Here is the code for the rounded borders:

**Css**
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#d4d4d4; border:0 solid #08c; border-width:0 1px;}

**Html**

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>Snazzy Borders</h1>
<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

<h2>Rounded borders without images</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

What I have done is added the css and markup to the page, but it does not display correct. Maybe some padding tricks can solve this?

The problem is that I can not get the 3 colum to display as intended. The right colum is to wide, and the content colum is not centered, even when I use l+r margin auto, width 98%. This colum is inside the rounded corner div, so it should display correct.

trond.rud
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

3 colum with rounded corners w/o images/Javascript

Here is a screenshots of what it look like in FF and IE.
As you can see IE mess up things. So it starts to look better, but still some things to iron out.

--To be Fixed in FF--
1. Layout is stretched to much. Width is sat to 75%.
You do not see this from the screenshot, becaues I had the history sidebar open. But, when I view it with native TFT res of 1400x1050 and fullwidth FF, then strange thing is there.
The right colum becomes to wide, wider then the css claimed width of 160px. Rather is should be the content colum absorbing any extra width, along with the wite part outside the divs. Remember the actual width is 75%.

**Edited**
IE problems now resolved!

I have removed the IE screenshot as IE is now working. The FF screenshot is still there, so people can view both full browser width and from the post below how FF diplays the page when a sidebar is in use in the browser.

The html+css is changed, so I removed that as well. The removed files are however included in new version in the post below.

trond.rud
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

3 colum with rounded corners w/o images/Javascript

Ok. IE is correct now. I changed the width for the container to 100% and that took care of IE.

So I am still not able to get FF to display the width (75%) I have sat for the outer most div. FF fills the screen with the layout, which is wrong.

Screenshots and the edited html file below.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 39 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

3 colum with rounded corners w/o images/Javascript

Try this. #xsnazzy {background: transparent; margin:auto;width:75%;} instead of what you have. This should get you a little further Wink

trond.rud
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

3 colum with rounded corners w/o images/Javascript

DisinfectedBarfbag wrote:
Try this. #xsnazzy {background: transparent; margin:auto;width:75%;} instead of what you have. This should get you a little further Wink

Thx. But now thaat I got the width fixed, things is not centered in FF:-) Will give it another look and cry ot for help if needed. Thx.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 39 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

3 colum with rounded corners w/o images/Javascript

Strange it centers for me in firefox. Are you sure you also changed the margin:1em;in #xsnazzy to margin:auto; :?:

Can you post a link to a version online? if not please paste the full code of that page here.

trond.rud
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

3 colum with rounded corners w/o images/Javascript

Whoopsie :oops: Did not change the code, I added the code.
Well now it is working great. Thx a lot. Guess I better tidy up the css as well as the markup. That will for sure save some times for future upgrades of the design.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 39 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

3 colum with rounded corners w/o images/Javascript

Laughing out loud Sounds a lot like I was a little while ago. Glad it works now. Laughing out loud

trond.rud
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

3 colum with rounded corners w/o images/Javascript

Hmm. That silly thing just wont play nice with me.
I have the site online now. http://free.hostdepartment.com/z/zlippers/

Well I am back to the start, the layout is just fine in IE, bit FF displays the right colum as to wide. I use FF 1.51 and run native TFT 1400x1050 resolution. Can other tell me if they too see the to wide right colum in FF? If I make window smaller it is all correct?

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 39 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

3 colum with rounded corners w/o images/Javascript

Can't check this myself, I only have a CRT monitor, but I know others here have TFT so hopefully they can help you. Good Luck. :?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

3 colum with rounded corners w/o images/Javascript

The reason the right column seems so large to you is probably because the text in the center is so small. If you look at it in a CRt at any resolution, and resize the text smaller, the width of the right column grows.

I'm not too up to speed on how your particular layout is constriucted, but you have the border on the middle element - could you change it to a left border on the right column?

Congrats on getting this far though, I know how hard you've worked on this!

Verschwindende wrote:
  • CSS doesn't make pies

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 39 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

3 colum with rounded corners w/o images/Javascript

I used the snazzy corners here http://www.about-gravesend.co.uk/index.php with the code applied to multiple divs but not 3 columns, so I didn't see that problem, although I had plenty others on the way. Wink I'll have another look and see if I can figure it out.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 39 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

3 colum with rounded corners w/o images/Javascript

Try this.

 
 
<style type="text/css"> 
 
  
#xsnazzy {background: transparent; margin:40px auto;width:85%;} 
 
.xtop, .xbottom {display:block; background:transparent; font-size:1px;} 
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;} 
.xb1, .xb2, .xb3 {height:1px;} 
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #08c; border-right:1px solid #08c;} 
.xb1 {margin:0 5px; background:#08c;} 
.xb2 {margin:0 3px; border-width:0 2px;} 
.xb3 {margin:0 2px;} 
.xb4 {height:2px; margin:0 1px;} 
 
.xboxcontent {display:block; background:#d4d4d4; border:0 solid #08c; border-width:0 1px;} 
<!-- End snazzy --> 
 
	<!-- 3Col Layout --> 
 
 #container 
{ 
width: 100%; 
background-color: #fff; 
color: #333; 
border: 1px solid cyan; 
 
} 
 
#top 
{ 
padding: .5em; 
background-color: #ddd; 
border-bottom: 1px solid gray; 
height: 200px; 
} 
 
#top h1 
{ 
padding: 0; 
margin: 0; 
} 
 
#leftnav 
{ 
float: left; 
width: 160px; 
margin: 0; 
padding: 10px; 
border:1px solid red; 
} 
 
#rightnav 
{ 
float: right; 
width: 160px; 
margin: 0; 
padding: 10px; 
border:1px solid blue; 
} 
 
#content 
{ 
margin-left: 180px; 
border-left: 1px solid gray; 
margin-right: 180px; 
border-right: 1px solid gray; 
padding: 10px; 
max-width: 36em; 
border:1px solid green; 
} 
 
#footer 
{ 
clear: both; 
margin: 0; 
padding: .5em; 
color: #333; 
background-color: #ddd; 
border-top: 1px solid gray; 
} 
 
 
#content h2 { margin: 0 0 .5em 0; } 
 
<!-- End 3 Colum --> 
 
 
</style> 
 
 


I changed the code in the following way.

1. Changed the #leftnav and #rightnav padding to 10px instead of ems, this seemed to be causing a lot of the problems.

2. Changed the #content margins to 180px to take up some of the spare space.

3. Changed the padding in #content to 10px also.

4. Added 1px borders to all divs for testing. This makes it easier to see where they stop. Remove these to see how it will look with your settings.

This may not be exactly what you want but it is going in the right direction. Have a go resizing and check, you might want to change some of the settings I altered to see what you get.

Let me know how you get on.

Smile

Just add a bit more if you change the #container code to

 #container
{
width: 100%;
background-color: #ddd;
color: #333;
border: 1px solid cyan;

}
you can then remove the background and color declarations for the #top, #leftnav, #rightnav, #content and #footer. This means that if you want to change the overall color, because they will inherit the settings from #container, just 1 edit will do it. Try this and see. Wink

trond.rud
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

3 colum with rounded corners w/o images/Javascript

Thx for teh help you all. Will not be able to check it out now, but will look at it tomorrow. If I get more errors I will let you know.

Have a nice weekend.

trond.rud
Offline
Enthusiast
Last seen: 15 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

3 colum with rounded corners w/o images/Javascript

Thx DisinfectedBarfbag. You have been great. Btw, adding the cyan+red borders was great. Nuch easier to see what is going on. Will use that regularly from now on when working with new designs.

I am still working out the last details, it is perfect in IE but still displays things out of order in FF. Problem is not corrected but I will post link to the new site when ready.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 39 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

3 colum with rounded corners w/o images/Javascript

Glad to be of help, nice to be able to contribute after getting a lot of help myself.

I have just checked in firefox 1.5.0.1, IE6 and Opera 8.51 and it looks the same, apart from Opera adding the ad sidebar that your web host includes.

When you can, post a screen shot of the results in firefox so that I can compare with my one, and also the link to the site itself. Anything else you want to ask, go ahead.

Good luck Smile Smile

john love
john love's picture
Offline
Enthusiast
Last seen: 10 years 39 weeks ago
Timezone: GMT-4
Joined: 2006-12-09
Posts: 62
Points: 14

3 columns with Snazzy corners

Reference my use of Snazzy Corners on my site.

Works as advertised on all Macintosh Browsers, except IE, as well as on IE Windows (don't know about other Windows Browsers)

Renders square corners with IE-Mac. I can live with that very nicely, especially since IE-Mac is not supported any more.

Finally gave up on Nifty Corners which I started with.

Thanks bunches and bunches for all the previous posts.

"Give someone a plate of food and you feed them for today .. teach someone to plant crops and you feed them for life"

Touch the Future! -- Teach!