I am writing a website in Html using CSS; in my website I have a text logo that I want to place in the top center size of the site, I am using CSS as indicated below
background-color:#4d5152;
position:fixed;
width:970px;
top: 0%;
padding-right:200px;
padding-left:200px;
My question is, how can I position my logo in the upper center and have the left and right size of the logo the same color of the logo without righting the values to the padding left and right; so it will be generic for all computer monitor size and browsers
hope I am clear enough
Thank for the help
Typically, I would write something like this:
HTML
<html>
<body>
<div id="wrapper">
<h1 id="logo">My Company</h1>
</div>
</body>
</html>
CSS
#wrapper {
width:960px; /* Width of the containing 'wrapper' or content area */
margin:0 auto; /* This will center the wrapper. 0px margin on the top and bottom, and 'auto' on the left and right (let the browser decide the amount of margin). */
}
h1#logo {
text-align:center; /* If you don't define a width the h1 will be 100% as its parent (#wrapper). This centers the text. */
}
Here's an example showing this: http://jsfiddle.net/V5Cff/1/embedded/result/
Related
I know it sounds really weird, but I'm trying to code a website with very little CSS knowledge. It's just a test website, so that I can get into the language a bit more, but I'm having some troubles. I can't find the answers anywhere. In case necessary, I've included the HTML and CSS files at the bottom.
1. Center Body
I was wondering how to center the body of my website? I know it seems simple, but I've looked on every single Google link and I can't find a solution. When I zoom in to test my website on 175% zoom increase, as that's what most monitors have at least, I notice that my browser is scrolling in to the left side of the website, rather than the center. I would like the elements of the website to be in the center, so that it doesn't end up with a blank space on the right like YouTube has for larger monitors. However, I have no idea on whether or not there is there a way I can make the website zoom to the center?
2. Multiple Images
When I was slicing the website layout I made, I took three images from one of the 'rounded rectangle' shapes. My aim is to make it so I can have the shape become expandable, meaning that it'll be a small box [ ] for small numbers, but if the number has more digits, the box can expand without breaking the website. Because of this, I sliced the LEFT and RIGHT side of the content box, as well as a 1px inside which I hoped to expand. I have no idea where to look for a tutorial, however, on how to make them all work together. If somebody could point me in the right direction, I'd be extremely grateful.
3. Following
Resolved - a huge thanks to Nicole Bieber who helped me out! :-)
Many thanks.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> .. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
..
<div id="header"></div>
<div id="navigation">
<div class="founders2">
<div id="left_content">
<div class="news">Latest News & Information</div>
<div id="right_content"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS:
#logo {
background:url(images/main/logo.png) top left no-repeat;
width:391px;
height:148px;
font-size:0px;
margin:-10px 0 0 0;
float:left
}
body {
margin:0px;
padding:0px;
background:url(images/main/bg.gif) repeat;
#31
}
#header {
margin:0 auto;
width:100%;
height:147px;
background:url(images/main/header_bg.gif) repeat-x;
}
#navigation {
width:100%;
height:500px;
background:url(images/siteSlice_13.gif) repeat-x;
}
#founders1 {}
#left_content {
float:left;
width:910px;
height:100%;
}
#right_content {
float:right;
width:490px;
height:100%;
}
#footer {
margin:0 auto;
clear:both;
width:100%;
height:77px;
background:url(images/siteSlice_96.gif) repeat-x;
}
/**
* Needs to be aligned vertically.. no idea how.
**/
.news {
font-family:ubuntu;
font-size:25px;
color:#FFFFFF;
text-shadow: 2px 2px #000000 12;
text-align:left;
text-indent:15px;
width:100%;
height:100%;
background:url(images/main/news_header.gif) no-repeat;
margin:100px;
}
.founders2 {
background:url(images/main/founders_navbar.gif) no-repeat;
width:265px;
height:52px;
margin:0 0 0 600px;
}
Anything not in the /main/ image folder hasn't been re-edited by myself yet, but is still a basic image that should act in the same way as when a new one replaces it.
Centered Page Content
One way you could center the body of a fixed width page layout with could be done with Auto Margins, as I will show in the following example
This is a basic example with only a div element which will be our website container.
You can apply a fixed with either to the container or to the body, and apply the automatic margins to the container itself...
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="center.css" rel="stylesheet" type="text/css">
<!---
other header and meta stuff ...
--->
</head>
<body>
<div id="box_content">
<p>
My Content Area.
</p>
</div>
</body>
</html>
and the CSS for the above:
CSS for Center Aligned Content using Centered Body
In this CSS example for the above HTML code, we center our container (div) element by applying a fixed width to the Body element, and assigning Auto margins to the same element. The margins will expand evenly on both sides to preserve the fixed 800px with, thus centering the page:
#charset "utf-8";
/* CSS Document */
body{
/*
Applying a fixed width with automatic margins will center the page:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
background-color:#FFF;
overflow:auto;
padding:5px;
}
However, you can also apply the fixed width to the container itself instead.
The following example works with the above HTML code.
CSS Example with centered div element
#charset "utf-8";
/* CSS Document */
body{
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
/*
Applying a fixed width with automatic margins will center the page,
will also work on the container itself:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
background-color:#FFF;
overflow:auto;
padding:5px;
}
Both of the above CSS examples look exactly the same. (Should look the same on all the modern web browsers ).
There are various other ways to center using CSS ( including setting Position to 50% with a -400 margine, but this breaks on some renderers ).
The approach I have demonstrated is simply my simple but my preferred approach to centered fixed width layouts.
Also, I removed the 100% width values on your nested elements that dont need them ( div elements will default to 100% width anyhow )
100% Height will not work, a div element will not expand vertically to its container, unless you use absolute positioning ( but will expand to page size, and not the parent container size ). DynamicDrive has examples on how to do this.
Also looking at your Source, I suggest changing the following:
font-family:ubuntu;
Because it is not a font family recognized by all operating systems, so visitors to your web page will most likely not see the same fonts you see on your own system. unless you use ServerSide Fonts.
If you don't use a server side font, it would be best to stick to common fonts and font families that (usually) exist on all major operating systems if you want all users on all major operating systems to see the same font regardless of whichever web browser they use.
3 Slice Buttons
One again - there are more than one way to do this. One of the easier ways to do it would be to layer 3 divs and apply a slice to each layer. The following example is from a simple resizable button in one of my own template designs, a simple box-model button to say the least.
Note: I think nesting div elements in a << a >> hyperlink is considered a bad practice? Although I do it anyhow ... I could be wrong.
HTML
<a href="contact.php" style="float:right">
<div class="b_1"><div class="b_2"><div class="b_3">
Contact
</div></div></div>
</a>
The CSS for the above button:
/*
Contains the left slice of the button:
*/
.box_nav a .b_1{
float: left;
margin-top: 3px;
background-image: url(ui/ui_19.png);
background-repeat: no-repeat;
}
/*
Contains the Right slice of my button:
*/
.box_nav a .b_2{
background-image: url(ui/ui_23.png);
background-repeat: no-repeat;
background-position: right;
}
/*
COntains the tiled center slice of the button
*/
.box_nav a .b_3{
background-image: url(ui/ui_21.png);
height: 43px;
margin-right: 10px; /* This margin is the same width as the RIGHT slice */
margin-left: 10px; /* This margin is the same width as the LEFT slice */
line-height: 40px; /* my way of centering text vertically in the button */
text-align: center;
/*
prevents buttons with more than one word ( has spaces ) from breaking into two lines
*/
white-space: nowrap;
}
.box_nav a:hover .b_1{
background-image: url(ui/ui_24.png);
}
.box_nav a:hover .b_2{
background-image: url(ui/ui_28.png);
}
.box_nav a:hover .b_3{
background-image: url(ui/ui_26.png);
}
As seen above, this is a box model structure. The box_nav itself however requires "overflow:auto;" or "overflow:hidden;" however if height is not set explicitly.
The above button from my actual example looks like this:
Final Section
As for your 3rd question, I don't actually understand what you are asking, and the html/css combination breaks in my browser when I copy your code. ( also I cant see it properly because I also don't have your images. I'm not sure what you were trying there, but i looks like your were trying a 3 column layout?
Your html for this section pretty much completely falls apart in my browser ( and also in dreamweaver )
UPDATE:
As requested by you, here are two ways to do fluid layouts:
In this example, you can use the same automargins with a fluid width like this ( simply modify the fixed 800PX width to a fluid width, such as 80%
width: 80%;
margin-left:auto;
margin-right:auto;
If you want fixed margins with a fluid layout, you can simply set margins, but do not set a width:
width: auto;
margin-left:100px;
margin-right:100px;
I am wondering if it is possible to keep an img inside a div always centered regardless of the browser size? By being centered I mean that the left/right sides of the image gets cropped to ensure the image stays centered without modifying the height. Also, is it possible to prevent the horizontal scroll bar from appearing when the browser width is less then the image width?
I'm sure this is really easy to do if my image is located in a background-url tag in CSS, but because this image is being housed inside the SlidesJS carousel the image has to be from an img tag.
At the moment, I have used margin:0 auto; to keep the image centered as long as the browser width is larger then the image. Once the browser width shrinks, the image does not resize with the shrinking browser size. I also have yet to figure out how to remove the horizontal scroll bar when the browser width is too small.
This is what I'm trying to achieve: http://imgur.com/Nxh5n
This is an example of what the page layout is suppose to look like: http://imgur.com/r9tYx
Example of my code: http://jsfiddle.net/9tRZG/
HTML:
<div id="wrapper">
<div id="slides">
<div class="slides_container">
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 200px;
margin: 0 auto;
}
Try this: http://jsfiddle.net/9tRZG/1/
#wrapper {
max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
margin: 0 auto;
}
#wrapper img{
width:100%; /* the image will now scale down as its parent gets smaller */
}
To have the edges cropped, you can do this: http://jsfiddle.net/9tRZG/2/
#wrapper {
max-width: 600px; /* so this will scale down when the screen resizes */
margin: 0 auto;
overflow:hidden; /* so that the children are cropped */
border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}
#wrapper .slides_container{
width:600px; /* static width here */
position:relative; /* so we can position it relative to its parent */
left:50%; /* centering the box */
margin-left:-300px; /* centering the box */
}
#wrapper img{
display:block; /* this allows us to use the centering margin trick */
margin: 2px auto; /* the top/bottom margin isn't necessary here, but the left/right is */
}
Jeff Hines linked putting image always in center page where ShankarSangoli explained how to achieve this.
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
I am not sure about the align center looks proper to me as for the scroll bar.
You can use the following:
overflow-x: hidden;
I have a page with a vertical navbar on the left side of the page, and a "content" area to the right of the navbar. I want the width of the "content" area to fill the remainder of the screen, and the height to match the navbar height.
Here is what I have so far: jsFiddle
Preferably I am looking for a pure CSS solution to this problem.
Typically, the Faux Columns technique is used to fill in the space that isn't filled with content. You'll need to replace your CSS gradients with images, and it's much easier to set up with fixed dimensions (but still possible with fluid dimensions).
Essentially, you'd need to structure your HTML elements like this:
<div id="header"></div>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Your CSS would do the work for you as far as stretching the content goes:
/* The top part of the rounded container */
#header {
background: url(images/bg_top.gif) 100% 100% no-repeat; /* sit on top */
}
/* The background for your content */
#wrapper {
background: url(images/bg_tile.gif) 100% 0 repeat-y; /* repeat on the right */
}
/* The bottom of your content */
#footer {
background: url(images/bg_bottom.gif) 100% 0 no-repeat; /* sit on the bottom */
}
You'll definitely need to play around with some negative margins to get things to sit perfectly.
Apply a min height to your content area:
#content {
position: absolute;
margin-left: 200px;
width: 100%;
min-height:328px;
}
Check out the updated fiddle: http://jsfiddle.net/hsGN6/6/
It's crude, but it works.
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div
I want to recreate the following header:
The problem is that the content is centered in the white section. Grey is the background of body and the header is 100% of screen.
What I have now is:
CSS
.top_left {
background:#3c4d74;
}
.top_right {
background:#2f3a5a;
}
.top_center {
background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
height:140px;
}
#page,
.top_center {
max-width:1000px;
margin:0 auto;
}
#page {
background:#FFF;
}
body {
background:#DEDEDE;
}
HTML
<body>
<div id="top-header">
<div class="top_left"></div>
<div class="top_center">
LOGO
</div>
<div class="top_right"></div>
</div>
<div id="page" class="hfeed">
MY content bla bla bla
</div>
</body>
Which you can see working on http://jsfiddle.net/gTnxX/ (I put max width 600px instead of 1000px so you can see it on fiddle).
How can I make the left side soft blue and right side hard blue at any resolution?
To do this you need to be very aware of how positioning works.
The #header-bg is positioned so it falls below #wrapper. It is 100% width, 140px high with 2 divs which both take up 50% of that space and they both get a different colour for left/right.
The #wrapper is relatively positioned to make z-index work, putting it above the #header-bg. Width is set at 600px, and margin: 0 auto; centers it.
The #header is a simple div which has a height set to it and the background it requires.
Content follows the #header in normal flow.
Here is a jsfiddle with the requested behaviour.
http://jsfiddle.net/sg3s/cRZxN/
This even degrades nicely and lets you scroll horizontally if the content is larger than the screen (something I noticed from the original jsfiddle).
Edit:
To make it IE7 compatible I made some changes to fix 2 bugs. I had to add left: 0; and top: 0; explicitly to #header-bg to fix a positioning bug. Made the divs inside #header-bg 49% instead of 50% or else IE7 would not resize them properly and make the right div bump down. To compensate for the small gap that created I made the right div float: right;.