I have a fixed width layout I am trying to make responsive, I have looked at the code and #wrapper div isn't adjusting to full width when I use the different views in Dreamweaver.
The footer I get a scroll bar and the footer, slider, top-bg are all not going full width. But the content area does?
I changed the wrapper to 100% thinking that this would adjust everything within the page to move full screen but that hasn't worked?
CSS:
/* Containers */
#wrapper {
width:100%;
}
#top {
width:900px;
margin:0 auto;
}
#top-bg {
background-color:#03274B;
width:100%;
overflow:auto;
}
#topnav {
width:900px;
margin:0 auto;
}
#topnav-bg {
clear:both;
background-color:#072C53;
width:100%;
padding:15px 0;
border-top:2px #2B4D71 solid;
border-bottom:2px #2B4D71 solid;
}
#banner-bg {
width:100%;
background-image:url(../images/bg/blue-bg.fw.png);
background-repeat:repeat;
}
#banner {
padding:0px 0;
width:900px;
margin:0 auto;
}
#subbanner {
width:900px;
margin:0 auto;
padding:30px 20px;
}
#subbanner-bg {
width:100%;
}
#subbanner h1 {
font-size:48px;
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1px #000 solid;
}
#content-wrap {
width:900px;
margin:0 auto;
}
#leftside {
width:425px;
margin-right:50px;
float:left;
}
#leftside h2 {
padding-bottom:10px;
margin:20px 0px 10px 0px;
border-bottom:1px #000 solid;
}
#rightside {
width:425px;
float:right;
}
#rightside h2 {
padding-bottom:10px;
margin:20px 0px 10px 0px;
border-bottom:1px #000 solid;
}
#content {
}
#content-bg {
}
#content-wrap {
}
#footer {
width:100%;
margin:0 auto;
padding:20px 0;
}
#footer-bg {
clear:both;
background-color:#03274B;
width:100%;
}
#footer p {
}
Without posting your HTML markup we have to make some assumptions. I also suggest you do not use the design views in Adobe Dreamweaver as they bear very little relation to how a browser will render your page, I suggest you press F12 (Windows) or option + F12 (Macintosh) to view your page in your preferred browser.
The CSS you posted appears a little broken, I am assuming that in areas such as top {...} you actually have #top {...} as top is a non-standard element.
That being said you still have areas in your CSS such as:
#top {
width:900px;
margin:0 auto;
}
The element with id="top" will only ever be 900px wide despite the size of it's parent element (possibly id="wrapper").
Let's assume you have markup similar to the following:
<div id="wrapper">
<div id="top">
<div id="top-bg">
</div>
</div>
</div>
Despite the fact that #top-bg has width: 100% it will only ever be 900px wide as it is a child of #top and width percentages are relative to the parent container's width.
Related
I have a problem, i would like to place a div after a div with a div child of absolute position.
What i will like to do is main div to fit with main-inner-one height and normal div to take place after main div
Here is my code: jsfiddle
#main {
width:100%;
background-color:#f00;
padding:20px 0px 20px 0px;
position:relative;
}
#main-inner-one {
width:100%;
height:200px;
background-color:#f9c;
position:absolute;
}
#normal {
width:100%;
height:50px;
background-color:#000;
}
<div id="main">
<div id="main-inner-one"></div>
</div>
<div id="normal"></div>
To make the #main-inner-one stretch across the #main you need to remove absolute positioning.
Preview - This is how it should've worked.
Answer: Change this
#main-inner-one {
position: relative;
padding:20px 0px 20px 0px;
}
#main {
padding:20px 0px 20px 0px; /* remove this */
}
if i understand correct you want to adjust the width and height based on the child's width and height. for me this worked by setting the parent div display to table-cell and width, height to auto. the child set display to block and the width, height to vw / vh or anything else except % values.
#main {
display:table-cell;
position:relative;
width:auto;
height:auto;
background-color:#f00;
padding:20px 0px 20px 0px;
}
#main-inner-one {
display:block;
position:relative;
width:100vw;
height:80vh;
background-color:#f9c;
}
#normal {
display:block;
position:relative;
width:100%;
height:50px;
background-color:#000;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I'm working on a site for a friend at http://blueridgemusclecars.com/ . I want the logo at the top center, and the phone number and location right aligned, but I would like the text in the same plane horizontally as the logo. Right now the text is below and to the right of the logo. Here is my CSS for the header, any ideas?
header {
width:100%;
position:relative;
z-index:2;
}
h1 {
padding:45px 20px 37px 26px;
/*background:url(../images/h1-bg.jpg) 0 0 no-repeat;*/
/*float:right;*/
}
h1 a {
display:block;
width:500px;
height:278px;
text-indent:-999em;
margin:0 auto;
background:url(../images/logo.png) 0 0 no-repeat;
}
.address {
display:block;
font-size:14px;
line-height:28px;
text-align:right;
color:#b22300;
}
.phone {
display:block;
font-size:25px;
line-height:30px;
text-align:right;
color:#fff;
margin-top:-5px;
}
Set your .fright class to have a negative top margin.
.fright { margin-top: -100px; }
The markup could probably be reworked a little (e.g., not sure why the link and image are in an <h1>), but easiest thing on this page I think is adding the following to your CSS:
.wrapper { height: 300px; } //reduce empty space
.fright { margin-top: -195px; } //align phone number with image bottom
That looks pretty good in Chrome anyway...good luck!
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom:
Container where post is:
Yellow Bg:
.home-body {
background-color:#EAC117;
height: 100%;
.home-main-content {
width:800px;
min-height: 100%;
position:absolute;
overflow:hidden;
margin-left:56.5%;
left:-500px;
top:51px;
border-left:1px solid black;
border-right:1px solid black;
background-color:#fff;
background-repeat:repeat-y;
.home-post-echoed-container {
width:400px;
position:absolute;
margin-left:50%;
left:-200px;
top:200px;
overflow:hidden;
}
.home-echoed-posts {
width:600px;
overflow:hidden;
left:-98px;
position:relative;
background-color:#fff;
margin-bottom:-5px;
border-top:1px solid;color:#0a527e;
border-left:1px solid;color:#0a527e;
border-right:1px solid;color:#0a527e;
}
.home-echoed-posts-post {
margin:10px;
color:black;
}
.home-echoed-posts-email {
margin:10px;
color:black;
}
.home-echoed-posts-date {
margin:10px;
color:black;
}
You are doing it wrong.
To center something you should use (instead of absolute positioning):
.foobar{
margin: 0 auto;
width: 800px;
}
As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:
.container{
overflow: hidden;
}
It is a bit counter-intuitive, but works like charm. You can read more about it here.
Update: and read this article too.
Update 2:
Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.
.home-post-echoed-container {
width: 600px;
margin: 0 auto;
padding-top: 200px; // im guessing what top:200px was doing
overflow:hidden;
}
.home-echoed-posts {
width:600px;
float: left;
background: #fff;
margin-bottom: -5px;
border: 1px solid #0a527e;
border-bottom: 0;
}
Something like this. But I'm really just guessing.
html, body
{
height:100%;
}
Make sure you include that in the top of your CSS script, else setting .home-main-content to min-height:100%; won't work, because to CSS, if undefined elsewhere, 100% is simply the height of the current div.
Also ensure that you have that same property set if your .home-main-content is surrounded by another div.