I am learning how to make an existing site, responsive and something that appears to be so simple, is making me absolutely crazy.
When I apply the max-width-480px style sheet, it is cutting off about 5 px of my left edge. You can tell it is missing because the rounded corners I added in css are cut off abruptly on the left but are nice and smooth on the right. I have spent several hours trying to tweak the wrapper and mainwrapper css and nothing seems to fix it. Any ideas?
Note: that the image for the topwrapper is a set width white background with rounded corners. Since the set sized graphic is not going to be responsive, I have removed it for the smaller screens and just added the border-radius to the mainwrapper div.
NOTE2: I tried to add an image to show you the issue, but because I am a new poster, I was unable to. The site is: www.develdesign.com/WaterWorks Please be sure to view it on your smartphone to see the issue. Thank you.
A snippet of the wrapper related divs in html
<body>
<div id="wrapper">
<div id="topwrapper"></div>
<div id="mainwrapper">
<!-- Header Start -->
<div id="header">
<div class="center">
<!-- Logo Start -->
<div id="logo"><img src="images/wworks/wwlogo239px.png" alt="logo" /></div>
<!-- Logo End -->
<div id="headerright">
<!-- Menu Navigation Start -->
<? require('top-navigation.php'); ?>
<!-- Menu Navigation End -->
</div><!-- end headerright -->
</div><!-- end center -->
</div><!-- end header -->
Regular Desktop Styles (non-responsive css)
#wrapper {
width: 100%;
max-width: 976px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#topwrapper {
height: 19px;
width: 100%;
max-width: 976px;
background: url(../images/topwrapper.png) no-repeat;
}
#mainwrapper {
width:100%;
max-width: 976px;
background: url(../images/mainwrapper.png) repeat-y;
}
#bottomwrapper {
margin: 0 auto;
height: 55px;
width: 100%;
max-width: 976px;
background: url(../images/bottomwrapper.png) no-repeat;
}
.center {
margin: 0 auto;
width: 900px;
}
/* ----------------------- HEADER -----------------------*/
#header {
width: 960px;
height: 50px;
padding-bottom: 39px;
background: url(../images/bgheader.jpg) bottom center repeat-x;
margin: 0 auto;
}
#headerright {
padding-top: 20px;
width: 670px;
float: right;
position: relative;
}
#logo {
margin-top: 15px;
float: left;
width: 220px;
}
Responsive for max-width-480px
#wrapper {
width: 100%;
}
#topwrapper {
display:none;
}
#mainwrapper { /*white background for all header and maincontent */
border-radius: 5px 5px 25px 25px;
}
#bottomwrapper {
display: none;
}
.maincontent {
width: 60%;
float: left;
}
<!-- HEADER -->
#header {
/*width: 50%;*/
/*height: 50%;*/
/*background-image: none;*/
}
.center {
width: 95%;
}
#headerright{ /* includes phone numbers and full site navmenu */
display:none;
}
#logo {
width: 100%;
}
Can't say for sure but after a quick look, could it not be possible there is padding somewhere knocking it out. If so make sure to set the box-sizing attribute in your css.
Link:
Box Sizing
Also check there is no whitespace between elements, this also effects display: inline-block in such a way that two divs at 50% width won't fit next to each other. You can either set line height to 0 or comment out the whitespace.
I finally figured it out! The mainwrapper had a background image that was also a set width image (like the topwrapper). Once I realized the mainwrapper's background image repeated only y, I removed it and replaced it with a background-color of white instead and it looks great.
#mainwrapper {
width:100%;
max-width: 976px;
background: url(../images/mainwrapper.png) repeat-y;
}
Related
I've got a logo on my website that i'm trying to make stay in the middle and be responsive. I've tried tons of CSS code from "magin-left:auto;..." to "top:30..." but the logo wont get smaller and stay in the middle. I was wondering if anyone could help me. Heres my website -- http://www.mediadude.co.uk -- The logo is the big mediadude sign in the middle, Try resizing the browser and you can see that it doesn't stay in the middle and get smaller.
Thanks for you time.
Hantoo
You have set max-width to the image but not to the h1 tag.
h1#LogoMain {
max-width: 100%;
}
Also you have a media query giving body padding: 20
#media (max-width: 767px) {
body {
padding-top: 0;
padding-right: 20px;
padding-left: 20px;
}
Change the above values to 0 for an edge to edge look on your header etc.
This will do what you want: http://jsfiddle.net/TJF8k/1/
<div class="header">
<div class="floater"></div>
<div class="imgwrap">
<img class="image" src="//placehold.it/400x150">
</div>
</div>
For the CSS, you'll need to adjust the negative margin-bottom on .floater based on the dimensions of your image.
.header {
background-color: teal;
height: 300px;
}
.floater {
height: 50%;
width: 100%;
margin-bottom: -10%;
}
.imgwrap {
width: 50%;
margin: 0 auto;
max-width: 400px;
}
.image {
max-width: 100%;
vertical-align: bottom;
}
I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
Thanks!
Change the top property to margin-top
Demo
position: relative;
top: -200px;
changed to
margin-top: -200px;
For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.
In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.
I am having an issue where the background color is behaving unexpectedly when the viewport is shrunk to a size smaller than that specified for some of my elements. While the scroll bars appear correctly the background is not what I would expect. When the viewport is as large or larger the backgrounds behave as intended. When inspecting the page elements with Firebug it seems that the body element is not stretching even though content inside of it is. What's causing the backgrounds to behave this way?
I've provided what I believe to be the pertinent html and CSS, but if I've omitted something please let me know.
Shrunk Viewport Example
Enlarged Viewport Example
CSS
html
{
background: #A37C45;
}
body
{
background:
#55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
#container
{
width: 100%;
}
#header
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding: 5px;
overflow: hidden;
}
#main
{
width: 730px;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#footer
{
background:
url("../images/backgrounds/grass.png") repeat-x scroll left top;
clear: both;
width: 100%;
overflow: hidden;
padding-top: 30px;
margin-top: 20px;
}
#footercontainer
{
width: 100%;
background-color: #A37C45;
margin-top: -1px;
}
#footercontent
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
overflow: hidden;
}
HTML
<html>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
<div id="footercontainer">
<div id="footercontent">
</div>
</div>
</div>
</body>
</html>
The reason you're seeing this behaviour is because your width: 100% elements are only taking the viewport width as the amount of background they need to render.
You can fix it by adding a min-width declaration to your body element's CSS. Simply set it to the largest nested element's width:
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
min-width is not supported in IE so use the expression
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
/* IE Version */
width:expression(document.body.clientWidth < 730 ? "728px" : "auto" );
}
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.
I have a quick question about to how setup my basic fluid layout. I have one 40px high, and 100% wide header bar at the top, this looks great.
Then i have a #left and #right div, each floated respectively. This looks cool. They both have height 100% which works great but the issue is the page then scrolls 40px down, because there is the 40px from the header bar... if i use a fluid layout for the header and then the content box's it would look awful on a tiny or very large resolution.
Any ideas?
Here is my CSS
body
{
background: #ebebeb;
margin: 0;
padding: 0;
min-width: 750px;
max-width: 1500px;
}
#wrap
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#header
{
background: #414141;
height: 40px;
width: 100%;
}
#sidebar
{
width: 30%;
background: #ebebeb;
height: 100%;
float: left;
}
#rightcontent
{
width: 70%;
background: #fff;
height: 100%;
float: right;
}
#footer
{
width: 100%;
background: #414141;
height: 40px;
clear: both;
}
And here is my html page:
<body>
<div id="wrap">
<div id="header">
head
</div>
<div id="sidebar">
side
</div>
<div id="rightcontent">
right
</div>
<div id="footer">
footer
</div>
</div>
</body>
Does that help :)
height: 100%; is a tricky thing for web pages, as you are no doubt keenly aware. Looking at your code in Firefox 3.5.7 the #sidebar and #rightcontent columns only have only the height of about an em — just enough to hold the text you put in them, not the full page length I think you were hoping for. The columns are trying to calculate percent height from the explicit height of their parent, but #wrap also has a %-based height, which causes this to fail (at least in my Firefox).
Now, as you've described it (the columns being the right height, except for an extra 40px scroll) what seems to be happening is that whatever browser you're using is passing the full height of #wrap as 100% of it's parent, which is <body>. So naturally, when your columns are sized to the height of <body>, which also encloses the height of your header and footer, the columns are too tall.
A trick I've used a couple of times to achieve the full page length appearance of columns that scales appropriately to whatever page dimension is to stick a position: fixed; bottom: 0px; <div> tag at the bottom of my page with just enough markup inside it to mimic the structure and relevant CSS of the columns.
Here's what I did to your page to get this effect:
<!--Add this to your HTML-->
<div id='columnfooter'>
<div id='sidecont'></div>
<div id='rightcont'></div>
</div>
/* And modify your CSS like this */
#sidebar, div#sidecont {
width: 30%;
background: #ebebeb;
float: left;
}
#rightcontent, div#rightcont {
width: 70%;
background: #fff;
float: right;
}
div#rightcont, div#sidecont {
height:100%;
}
#footer {
width: 100%;
background: #414141;
height: 40px;
position: relative;
bottom: 0px;
}
div#columnfooter {
position: fixed;
z-index: -25;
bottom: 40px;
height: 100%;
background: #ebebeb;
width: 100%;
}
Yes, using the HTML to form empty background columns this way does kind of mix semantic and stylistic markup — a technical no-no. But the CSS is clearly abstracted from the HTML, and with this code I have full page columns, #footer at the bottom (even when more than a page of content is added to either column above it), and it behaves the same in the latest versions of Firefox, Safari, Opera, Chrome and IE8 at any resolution (tested down to 800x600).
Hope this helps!