I'll jump to an example.
<!DOCTYPE html>
<head>
<title>Transposing div using CSS</title>
<style>
div#wrapper {
}
div#menu {
border:blue solid 1px;
}
div#main {
border:red solid 1px;
}
</style>
</head>
<body>
<p>How do we show the menu div immediately after the content div?</p>
<div id="wrapper">
<div id="menu">Menu</div>
<div id="main">Content</div>
</div>
</body>
</html>
In a browser, the menu div will come first in the flow. Now let's say that I need to change the layout so that "Menu" follows the content div content. How can this be done using CSS only. That means no change to HTML (no user agent detection stuff) and no JavaScript code.
The main CSS technique to position elements is to use the float:right|left attribute. It works well to move elements with respect to their bounding box, but I'm looking at moving an element at the end of its successor element in the normal flow.
And here's the use case. I want a web site to show up optimally on small screen browsers like on an iPhone. The web site currently has the menu at the top and content below, a very common layout but on an iPhone, the real estate is so limited that it would be preferable to have the menu following the main text content.
The solution only has to work with iPhone and Android mobiles (WebKit-based). So no need for taking into account Internet Explorer hacks and such.
If your menu has a fixed height (which most likely it does) you could use the same principles as the sticky footer: apply position relative on the wrapper, and a bottom padding of the same height as the menu. In code:
div#wrapper {
height: 100%;
padding-bottom: 100px;
position: relative;
}
div#menu {
border:blue solid 1px;
position: absolute;
bottom: -2px; /*to offset the border pxs*/
height: 100px;
width: 100%;
}
div#main {
border:red solid 1px;
}
You can view it in action here: http://jsfiddle.net/3ZheQ/
I haven't tried this on mobile phones yet, but I often did this on regular sites. I usually did it so that I wrapped both .menu and .menu_section into the .header div. Then you set some basic margin-top to the .menu div and add position:relative to the .header. Now header is your last relative for .menu and .menu_section.
Now just set position:absolute to the .menu_section, and you can set the top margin to 0. The .menu is going to be offset by the top margin while the .menu_section will be absolutely positioned at top of header.
If the design requires it, you can solve any overlapping with z-indexes (but you're not working for Internet Explorer oldies anyway, so that probably won't bother you).
Related
This problem arises when you are using a position:fixed top nav bar: Since the nav bar is out of the document flow, the initial content that you put after it will be hidden by the nav bar itself. This fiddle shows my solution which uses an extra spacer div and padding-top:
http://jsfiddle.net/MFwJT/
html
<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav
css
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */
2 questions
Is there a better solution?
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
To clarify question 2, margin-top produces this:
whereas padding-top produces this (the correct behavior):
Is there a better solution
IMHO, better solution would be to avoid a fake spacer div navspacer and instead, go with the span as you can easily achieve your target with a single div, using line-height and without a fake div
Example Fiddle
CSS
.fixednav {
width: 100%;
height: 30px;
background: #999;
line-height:90px; /*this is the key here*/
}
.fixednav > span {
position:fixed;
display:block;
width:100%;
line-height:30px;/*this is the key here*/
}
HTML
<div class="fixednav">
<span>some nav stuff</span>
main content which should not be covered by nav
</div>
Question 2
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
when you give the padding-top: 30px;, it is applied to the inside of the content area, making the whole div height (30px + if anything is in content), check this demo to see it
when you give margin-top: 30px;, it is applied to the outside of the content, demo and the contents overlap as FIXED position divs do not follow the document flow but the viewport flow!!
The problem here is that you fixed the position of the fixednav but not the navspacer. When you do this, the fixednav and navspacer are on the same line since one is fixed and not the other. When you add padding to the navspacer, it pushes away the fixednav from it. When you add margin-top:30px; it moves the fixednav and navspacer together. To fix this, add a fixed position to the navspacer and add the content to the fixed navspacer:
/*html*/
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>
/*css*/
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }
This will give you the correct behavior you are looking for.
Here is a link: http://jsfiddle.net/4vAgZ/
Also, this picture should help you with the padding vs. margin thing.
http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png
Hope this helps.
You can use a div for spacing like youtube does.
Here i made an example wich uses javascript to listen on window resizes and adjusts the spacer if necessary.
But you can also use this jQuery plugin for every single div.
//initial adjustment
$(function () { $('#topSpacer').height($('#fixedtop').height()); });
//adjustment on every resize event
$(window).resize(function () {
$('#topSpacer').height($('#fixedtop').height());
console.log("<div>" +$('#topSpacer').height() + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>
<div>
Does anyone overlay me?
</div>
<div id="fixedtop" style="position:fixed; top: 0px;">
Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
</div>
<div>
Another relative element
</div>
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;
So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
I have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.