1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

New to CSS Only Design - AND IT ROCKS!

Discussion in 'CSS' started by bz029, Jun 23, 2006.

0
  1. #1
    So check it out! I'm fully upgrading from HTML to CSS based design! I did this whole page with no tables (well theres some copied content that is going to be converted to a list, but ya). I love it, CSS rocks!

    http://www.puriontech.com/index.php

    I do however have some basic questions.

    Horizontal Scroll Bar :mad:
    You'll notice that there is a horz scroll bar... I KNOW this is because I used the width:100% for an element in the header - what is the workaround for this? I would like to keep it extended to 100% but have it not make the scroll bar. =P

    Content Block min-width works in Firefox / Not IE :confused:
    I would like the center content page to have a minimum width, which will stop it from squishing the text beyond what an 800x600 res screen would be reasonable to view.

    Ok so I tried what I thought would work- and it does! It works great in firefox! ( Just try it, make the window smaller and watch it stop perfectly ).

    HOWEVER it doesn't work correctly in IE. My question is- Why?
    According to this site there are no browser peculiarities with that property:

    http://www.blooberry.com/indexdot/css/properties/dimension/minwidth.htm

    Anyways, any help you can provide would be GREATLY APPRECIATED!

    And IM SO EXCITED TO HAVE FOUND THIS BOARD! IM SO EXCITED TO US CSS IT ROCKS! :D
     
    bz029, Jun 23, 2006 IP
  2. bz029

    bz029 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Oh and here's my CSS and HTML Code:

    CSS
    


/* Layout Stylesheet */ 
body{
 margin: 0;
 padding:0; 
 background:#ffffff;
 color: #333333;
 width:100%;
 }	 

 /* Left side content */
#lh-col{
 position:absolute;
 top:180px;
 left:0;
 width:140px;
 z-index:3;
 background:#99CCFF;
 color: #333333;}

 /* right side content */
#rh-col{
 position:absolute;
 top:180px;
 right:0;
 /*width:140px;*/
 width:140px;
 z-index:2;
 background:#99CCFF;
 color: #333333;}

/* c-block = backing behind l & r columns */
#c-block {
 width:100%;
 min-width:637px;
 top:180px;
 z-index:1;
 background:#99CCFF;
 color: #333333;
 height:80%;
}

#hdr{
 height:170px; 
 border-bottom:1px solid #000000; 
 z-index:1;
 width:100%; 
 background:#ffffff;
 color: #333333; 
 margin:0;
  }

#c-col{
 margin:0 142px 0 142px;
 position:relative;
 background:#ffffff;
 color: #333333;
 min-width:637px;
 z-index: 5;
 border: solid #000000;
 border-width:0 1px;
 }

#ftr {
 width:100%;
 height:35px;
 border: solid #000000; 
 border-width:1px 0;
 background:#eeeeee;
 color: #333333;
 margin:0;
 
 }

 
 
 /* NAVIGATION STYLES */
 
#logo {
	position:absolute;
	margin:0;
	padding:0;
	background:#ffffff;
	background-image: url(../LOGO/purion_v_5_resized50.jpg);
	background-repeat: no-repeat;
 	background-position: top left;
 	z-index:6;
	top:0;
	left:0;
	width:400px;
	height:163px;
	
}

#leftbox {
	position:relative;
	padding:0;
	margin:0;
	top:0;
	left:0;
	float:left;
	background-color:#fff;
	border:1px solid #42432d;	
	width:140px;
	height:40px;
	-moz-opacity:0.5;
	filter: Alpha(Opacity=60, FinishOpacity=60, Style=1);
	z-index:99;
}
 

#nav {
	position:absolute;
	margin:0;
	padding:0;
	top:0;
	z-index:10;
	left:141px;
	height:40px;	
	width:637px;
	border:1px solid #42432d;
	border-width:1px 0;	
}
#nav li {
	display:inline;
	padding:0;
	margin:0;
}



#nav li.rightbox {
	
	padding:0;
	margin:0;
	float:left;
	background:#006699 url(../images/nav_bg.gif) 0 0 repeat-x;
	width:33px;
	height:40px;
}

#nav a:link, 
#nav a:visited {
	
	color:#000;
	background:#6699CC;
	padding:20px 40px 4px 10px;
	float:left;
	width:auto;
	border-right:1px solid #42432d;
	text-decoration:none;
	font:bold 1em/1em Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	text-shadow: 2px 2px 2px #555;
}
#nav a:hover {
	color:#fff;
	background:#006699;
}

#nav li:first-child a {
	border-left:1px solid #006699;
}

#rightbox {
	position:absolute;
	padding:0;
	margin:0;
	top:0;
	left:0;
	z-index:5;
	border:1px solid #42432d;
	background:#006699 url(nav_bg.gif) 0 0 repeat-x;
	width:100%;
	height:40px;
}
    Code (markup):
    HTML
    
<!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>
<title>Purion, Inc.</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />

<link rel="stylesheet" type="text/css"
href="3c-hd-ft-flex-layout.css" />
<link rel="stylesheet" type="text/css"
href="3c-hd-ft-flex-presentation.css" />

</head>
<body>
	
	<!-- header div -->
		<div id="hdr">
	
	<div id="logo"></div>
	
	<span id="leftbox"></span>
	
	<ul id="nav">
		<li id="nav-home"><a href="#">Home</a></li>
		<li id="nav-reviews"><a href="#">Services</a></li>
   		<li id="nav-about"><a href="#">Hot Jobs</a></li>
   		<li id="nav-archive"><a href="#">Apply</a></li>
		<li id="nav-contact"><a href="#">Contact</a></li>
  	</ul>
	
  	<span id="rightbox"></span>
	</div>

	

	
	<!-- center column -->
		<div id="c-block">
			<div id="c-col">
			
			<h3>Welcome to Purion, Inc.</h3>
			<p class="top">Purion aims to connect the most skilled technical employees and contractors with employers and organizations that expect the best.
			</p>

			<p>Our staffing specialists take the time to understand you and your needs and focus on creating an absolute match to serve both employer and employee
			</p>
			
			<p>Your time is valuable - we won't waste it. 
			</p>
			
			<p>Your talent and career goals are unique - we appreciate and respect that.
			</p>
			
			<p>Apply Online or call 800 888 1111 today and tell us how we can help you achieve your career, financial and personal goals.
 			</p>
 			
 							

Any questions?
Send us an email, apply online or contact us by phone:
 

			
			</div>
			<!-- end of center column --></div>
			<!-- end c-block -->
			<div id="ftr" align="center">Footer Div - Copyright Information 
		</div>
		<!-- left column -->
		<div id="lh-col"><br />
		
<h4 align="center">Left Column</h4>
<p align="center">The left col can be used for navigation links,
search box etc.</p>
<br />
<br />
<p align="center"><a
href="http://www.ssi-developer.net/main/templates/">View more
templates.</a></p>
</div>
<!-- end of left column -->
<!-- right column -->
<div id="rh-col"><br />
<h4 align="center">Right Column</h4>
<p align="center">More links?<br />
Advertisements?</p>
</div>
<!-- end of right column -->
</body>
</html>
    Code (markup):
     
    bz029, Jun 23, 2006 IP
  3. Dreamchaser

    Dreamchaser Well-Known Member

    Messages:
    745
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    110
    #3
    and where did you learn CSS from, share the secret :D

    Cheers,
    Dreamchaser
     
    Dreamchaser, Jun 23, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    IE does not support min-width.

    You're using absolute positioning for your layout, which is not generally a good idea. It works well in this case, but study some non-AP layouts. In-the-flow elements make for a more robust page.

    AP elements shrink-wrap their content unless a width is specified. A problem, as you've encountered, is the need for careful thinking and work-arounds to achieve a 100% width without creating an overflow situation.

    In this case, I went through and removed {width: 100%;} wherever I found it, without any obvious breakeage, and no h-scrollbar.
     
    kk5st, Jun 23, 2006 IP
  5. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #5
    The horizontal scrollbar is caused by the rightbox. You've got a 1px border, which adds to the width. By removing the border at the left and right, it will remove the scrollbar.
    #rightbox {
border:1px solid #42432d;
border-right:none;
border-left:none;
}
    Code (markup):
    If you haven't specified a width and it will be drawn by the browser to fill the space it has, using it's default properties. But you may run into a few bugs if all widths are removed and the elements has no layout (http://www.satzansatz.de/cssd/onhavinglayout.html#prop). Read that page for more info on the problems that can occur and solutions around that.

    Also remove body {width:100%;}.
     
    AdamSee, Jun 24, 2006 IP
  6. scoxy

    scoxy Peon

    Messages:
    332
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Do you actually need any z-index properties for your page?
     
    scoxy, Jun 25, 2006 IP
  7. CanaryWoolf

    CanaryWoolf Peon

    Messages:
    114
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    CanaryWoolf, Jun 26, 2006 IP
  8. imagenesis

    imagenesis Active Member

    Messages:
    273
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    60
    #8
    Nice coding for your little experimenting :)
     
    imagenesis, Jul 5, 2006 IP
  9. UnderEstimated

    UnderEstimated Well-Known Member

    Messages:
    388
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    145
    #9
    good work for a start man :)
     
    UnderEstimated, Jul 5, 2006 IP
  10. srdjan

    srdjan Peon

    Messages:
    405
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Already seeing the benefits, don't you bz029? :) Cool work especialy if this is your first CSS page, although it needs a bit of graphical spice-up IMHO.

    What I would like to advise you is to use padding tags very carefully, as they are the most widely spread cause of websites not looking the same in IE/FF/Opera. Also, avoid unnecessary tags in your CSS as much as you can, and try to keep it as organized as possible!
     
    srdjan, Jul 6, 2006 IP
  11. mmmariap

    mmmariap Banned

    Messages:
    276
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Good job, nice coding. How long did it take?
     
    mmmariap, Jul 7, 2006 IP
  12. dc dalton

    dc dalton Active Member

    Messages:
    521
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    58
    #12
    Nice job for the first time!

    It liberating as hell when you finally "throw the tables away" isn't it?

    You will have to start to learn the couple of things that IE doesn't get though and as mentioned above absolute position is fine for a few things but normally you want the page to flow and will want to stay away from it!

    Also things like this:

    -moz-opacity:0.5;
    filter: Alpha(Opacity=60, FinishOpacity=60, Style=1);

    you should really try and avoid, FF doesnt understand one and IE doesnt understand the other!

    Lastly a little trick to "level the playing field" when you start a new css sheet. Add this to the beginning:

    * {
    padding: 0;
    margin: 0;
    }

    that removes ALL the padding and margins straight away, allowing you to then set things as you want without having to worry about them!
     
    dc dalton, Jul 8, 2006 IP
  13. Dekker

    Dekker Peon

    Messages:
    4,185
    Likes Received:
    287
    Best Answers:
    0
    Trophy Points:
    0
    #13
    you could use overflow:hidden as well
     
    Dekker, Jul 8, 2006 IP
  14. Rockstar3

    Rockstar3 Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Like it! Looks great!
     
    Rockstar3, Apr 4, 2011 IP