CSS Help - Post ID 177710

Jan 12th, 2012 at 11:34 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

then if you add

<div id="container" class="border">

</div>


right after the body tag in the html

and

#container {position:relative;
margin-left:auto;
margin-right:auto;
margin-top:50px;
min-height:200px;
height:auto;
width:800px;
}


to the css you should now have a container box on your page with a red dashed border around it. we can adjust the margin-top and width to get the size and position we want.

(see where we are going :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Jan 13th, 2012 at 10:04 AM
User 371048 Photo

jayjay
Registered User
59 posts

david wilson wrote:
then if you add

to the css you should now have a container box on your page with a red dashed border around it. we can adjust the margin-top and width to get the size and position we want.

(see where we are going :)



Done. I see that the black body background from the HTML page is being picked up as well ... but only in the 200px height of the container. I assume this is conflicting with the 'pearly white' color from the CSS file?

I also have a <body width="1000"> tag in the HTML ... does that conflict with the container width from the CSS?


RE: logo

The logo will be a similar size to what I have on the site, but not necessarily exact. I would assume we can adjust the size accordingly? Also, what do you mean by putting the logo as part of the background onto the page? What exactly would that do/accomplish, or, what would be a reason we would wish to do that?


-- me
Jan 13th, 2012 at 12:49 PM
User 122279 Photo

Inger
Senior Advisor
14,621 posts
Online Now

Hi, I see that you and David are doing nicely! :)

Just to clear up one thing: Position relative means you can position something relative to where it would have ended up if you didn't use the positioning. Move it up, down, left or right relatively to it's normal positioning, e.g.

And to your questions above:

The black body background doesn't display more than 200px height because there is no content in the rest of the body. (well, there is, but you have commented it out, so it doesn't display.)

There is no conflict between the body width and the container width. But giving the body a width is not necessary, because look at it as the background of the whole site. If someone has a small monitor or a large one, the body will spread out wall to wall anyway. The container (someone also call it 'wrapper') is where you place the site content, and it should have a width that doesn't cause anybody having to scroll sideways to see all the content. The norm these days seems to be something like 950 - 1000px.
You can create 'containers' inside THE container too, but then you have to name then differently, like e.g. 'main' and 'aside' if you want a two-column page.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jan 13th, 2012 at 12:59 PM
User 122279 Photo

Inger
Senior Advisor
14,621 posts
Online Now

Re: the logo.

It is recommendable to scale any images/graphics to the actual size that is going to be used on a site. If you have a large image but want to display it much smaller, the loading time would be much more if you didn't scale the image.

Putting the logo as part of the background is what you can do if it is going to appear on every page in a site. You then define it in the css file like this:

.logo {background-image:url("img/yourpic.png");
background-repeat: no-repeat;}


and in the html file you place the div where you want it to appear, and it could look just like this:

<div class="logo"></div>


Having some graphic element placed as a background property is also useful if you want to place text on top of it.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jan 13th, 2012 at 05:38 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

jayjay wrote:


I also have a <body width="1000"> tag in the HTML ... does that conflict with the container width from the CSS?


RE: logo

The logo will be a similar size to what I have on the site, but not necessarily exact. I would assume we can adjust the size accordingly? Also, what do you mean by putting the logo as part of the background onto the page? What exactly would that do/accomplish, or, what would be a reason we would wish to do that?




Having style info in the body tag will overwrite any style info you have in your css page so there is some interference there, as for the logo, we literally can put it anywhere but if you adjust the size afterwards you will have to teak the other sizes of the elements around it. but lets proceed and replicate what you have right now and hopefully you will pick up enough to tweak away fearlessly

right now on my end I have the html as

<Body>
<div id="container" class="border">

</div><!-- close container -->
</body>


and the css as:

html {
background-color: #FFFFF2; /*pearly gates white */
}

.border{border:dashed; border-color:red;}

body {

}

#container {position:relative;
margin-left:auto;
margin-right:auto;
margin-top:50px;
min-height:200px;
height:auto;
width:800px;
}
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Jan 13th, 2012 at 05:46 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

if we add
<div id="logo_left" class="border">
<a href="index.html">Home</a>
</div><!--close logo_left-->


right after the container div we create a clickable link back to your homepage now on to the style sheet
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Jan 13th, 2012 at 05:51 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

here is the logo area before styling
Attachments:
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Jan 13th, 2012 at 07:20 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

OK, here is where we are:

http://i130.photobucket.com/albums/p248/pug2775/coffeecup/2012-1-1319-14-7.png

and i zipped up the code here:

davidwilson.coffeecup.com/storage/cc_test_help.zip

so far the html looks like

<Body>
<div id="container" class="border">
<div id="logo_left" class="border">
</div><!--close logo_left-->
<div id="logo_top_right" class="border">
</div><!--close logo_top_right-->
<div id="logo_bot_right" class="border">
<ul class="top_menu-menu">
<li class="first"><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div><!--close top menu-->

</div><!-- close container -->
</body>


small and loads fast

and the css looks like

html {
background-color: #FFFFF2; /*pearly gates white */
}

.border{border:dashed; border-color:red; border-width:thin;}

body { }

#container {position:relative;
margin-left:auto;
margin-right:auto;
margin-top:50px;
min-height:200px;
height:auto; /*will expand with content*/
width:1062px;/*total width of logo left and logo right plus 2 ps buffer*/
padding:0px;/*get rid of container padding*/
}

#logo_left {
position: relative;
width:710px;
height:82px;
background-image:url('../images/logo_left.jpg') ;
background-repeat:no-repeat;
display:inline-block;
/*text-indent:-5000px;*/
}

#logo_top_right {
position: relative;
width:347px;
height:47px;
background-image:url('../images/logo_top_right.jpg');
background-repeat:no-repeat;
margin-left:714px;
margin-top:-89px;

}

#logo_bot_right {
position: relative;
margin-left:714px;
height:35px;
}


bigger, but loads once and is held in memory by the browser so only loads once :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Jan 13th, 2012 at 07:24 PM
User 371048 Photo

jayjay
Registered User
59 posts

david wilson wrote:
if we add
<div id="logo_left" class="border">
<a href="index.html">Home</a>
</div><!--close logo_left-->


right after the container div we create a clickable link back to your homepage now on to the style sheet



OK ... when you say '...on to the stylesheet', what do you mean by that? That code would go on the HTML page, would it not? (I did try it on the style sheet and the link did not show up). The only difference I see between my code and the .jpg file you sent is you have 2 dashed red lines above the <home> link with space between them and mine has no space between them.
-- me
Jan 13th, 2012 at 07:39 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

well you "could" put css style info on the html page in between <style></style> tags in the header of the html page, but any change you make to your css will have to be made on each html page manually. This can get out of control rather quickly.

typically we keep style info in a separate page with the .css extension and link that page to your html page with a line in the html page like this.

<link rel="stylesheet" type="text/css" href="css/css2.css" media="screen">

so when I say on to the css page i mean I am making changes to the page called css2.css

Why the hell would we ever do this???

Well the css page is loaded once when someone arrives to your website and held in memory and applied to each subsequent page they visit on your site, so overall things are quick, secondly lets suppose you wake up tomorrow and decide I don't want my background to be pearly gates white... I want it green, well you would change one line in the css file from

background-color: #FFFFF2; /*pearly gates white */

to

background-color: #B3EE3A; /*olive */

and the new colour ripples through all pages on your website automatically.

slick eh?? :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.