I'm not really a champ when it comes to CSS, so I was hoping I could get some assistance.
Right now I got one parent div with two child divs. Currently, whenever I resize the browser, the two divs overlap each other. I want the left div to be visible at all times.
It can be viewed in action over here: http://unlimitedbrettworks.com/forums/
CSS:
#header {
position: relative;
height: 140px;
overflow: hidden;
background-color: #E1E1E1; }
#logo a {
overflow: hidden;
float: right;
width: 620px !important;
height: 190px !important;
cursor: pointer;
background: url(../images/art/logo.png) no-repeat;
}
#userarea {
float: left;
margin: 0 1em;
padding: 1.5em 1em 0 1em;
text-align: left;
font-size: 0.95em;
width: 38em;
color: #313131;
font-family: tahoma, sans-serif;
line-height: 130%;
}
#userarea a:link, #userarea a:visited {
color: #333333;
}
#userarea a:hover {
color: #800000;
text-decoration: underline;
}
#header {
position: relative;
height: 140px;
overflow: hidden;
background-color: #E1E1E1; }
#logo a {
overflow: hidden;
float: right;
width: 620px !important;
height: 190px !important;
cursor: pointer;
background: url(../images/art/logo.png) no-repeat;
}
#userarea {
float: left;
margin: 0 1em;
padding: 1.5em 1em 0 1em;
text-align: left;
font-size: 0.95em;
width: 38em;
color: #313131;
font-family: tahoma, sans-serif;
line-height: 130%;
height: 122px; /* is value is the height min the padding you use.*/
}
#userarea a:link, #userarea a:visited {
color: #333333;
}
#userarea a:hover {
color: #800000;
text-decoration: underline;
}
That is the first problem. The second is on line 128 in your css file.
div#wrapper
{
margin: 0 auto;
min-width: 764px;
max-width: 2300px;
border: 10px solid #333333;
}
Needed to be:
div#wrapper
{
margin: 0 auto;
min-width: 1024px;
max-width: 2300px;
border: 10px solid #333333;
}
I went to your site, and played with Chrome's inspector, and found an answer.
Try adding these properties to #userarea:
#userarea {
position: absolute;
background-color: #E1E1E1;
height: 100%;
}
Hope this helps
Sorry, I didn't get your question... in the page you linked the #userarea div is always visible even if you resize the window.
To see the #logo div entirely, remove the 'height ' attribute from the parent div #header and it will go on a new line if the window is not large enough.
Related
If you minize your browser to smaller size, my site header and footer color
is erased. If you minize your browswer you will realize what do I mean.
Here is the picture what happened to my site if you minimize the window of internet browser. It's not easy to explain, because it loads perfectly fine on maximized browser window. my site url is www.virmodrosti.com
Here is the code from style.css
#footer {
margin: 0 auto;
width: 100%;
background: #0b3e61;
color: #CCD8E4;
padding: 12px 0;
font-size: 12px;
}
#footer a {
font-size:14px;
font-weight: bold;
color: #ABB9C7;
text-decoration: none;
}
#footer a:hover {
color: #ABB9C7;
text-decoration: underline;
}
#header {
background-color: #0A3952;
padding: 4px 0 20px 0;
}
#header .menu {
display: inline-block;
float: left;
padding-top: 60px;
font-size: 15px;
text-transform: uppercase;
line-height: 40px;
}
body {
background: #DEDEDE;
font-family: Frutiger, Lato, Georgia, serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 100%;
}
#wrapper2 {
margin: 0 auto;
height: 86px;
width: 1180px;
}
Kindly let me know what do I need to change in style.css in order to show properly?
In your code you have:
#main {
margin: 0 auto;
width: 1180px;
padding: 20px 20px;
}
The width is set to always be 1180px, as the window size is shrinking that is staying the same and stretching further than your header if that makes sense.
I have a css element #main that for some reason is set to 0px x 0px (it was working earlier, I'm not sure what changed.) when #main ul is at 800px x 39px, so therefore the entire element is hidden
Is there a way to have the dimensions of #main automatically change without having to hard-code it in?
I've tried:
overflow: hidden, auto
float: left, center, right
width: 100%
display: block, inline-block, inline
but none of them work.
Here's the link to the html page:
http://goo.gl/Ml2FIo
here's the css code:
/* HEADERS*/
h1 {
margin-top: 80px;
text-align: center;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 50px;
font-weight: 200;
color: #212121;
}
/* MAIN NAVIGATION */
#main {
/*width: 800px;
height: 100px;*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #fa5858;
position: fixed;
top: 0;
left: 0;
text-align: center;
overflow: auto;
display: inline-block;
}
#main ul {
/*overflow: hidden;*/
margin: 0 auto;
padding: 0;
position: fixed;
width: 800px;
}
#main ul li {
width: 100px;
display: block;
padding: 10px 20px;
text-align: center;
float: left;
list-style: none;
background-color: #FA5858;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#main ul li a {
text-decoration: none;
color: #ffffff;
}
/*
#main li a:hover{
opacity: 0.8;
}
*/
/*SIDE NAVIGATION*/
#side {
min-width: 100px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #ffffff;
position: fixed;
top: 0px;
right: 0px;
text-align: center;
overflow: hidden;
margin: 0 auto;
padding: 0;
display: inline-block;
border: 1px solid #fcacac;
padding: 0px 10px;
text-align: center;
float: left;
list-style: none;
}
#side a {
font-size: .75em;
text-decoration: none;
color: #505050;
line-height: 40px;
}
body {
background-image: url("http://commentnation.com/backgrounds/images/argyle_pattern_background_seamless_light_gray.gif");
background-attachment: fixed;
}
/* PARAGRAPH */
section {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
/*margin-: 50px 150px 50px 150px;*/
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 1em;
font-weight: lighter;
line-height: 30px;
padding: 20px 50px;
border: 1px solid #fcacac;
text-align: justify;
text-justify: inter-word;
color: #393939;
}
/* FOOTER */
footer {
display: block;
background-color: #ffffff;
padding: 30px 100px;
margin-top: 150px;
position: relative;
/*width: 100%;
bottom: -10px;
left: -10px;*/
border-top: 1px solid #e6e6e6;
}
/* TITLE IMAGE */
#title-img {
/*position: relative;i*/
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
EDIT 1:
I just realized that the #main element is actually visible on a Windows Chrome, but not on Mac Chrome or Safari (which I've been using) while still having the 0px x 0px dimensions.
You can use flex. It's a nice and easy way to set width, margins, paddings for things.
Here's a wonderful "Complete guide to flexbox":
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could do something like this:
nav {
display: flex;
flex: 1;
/* you can set some width if you want
width: 400px;
*/
background-color: #eee;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex: 1;
list-style-type: none;
background-color: #ddd;
border: 1px solid #00f;
}
nav ul li {
display: flex;
flex: 1;
padding: 5px 10px;
margin-right: 10px;
background-color: #bbb;
border: 1px solid #f00;
}
nav ul li:last-child {
margin-right: 0;
}
<nav>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</nav>
You can change width of nav to whatever you like, or not set it at all and give the nav flex: 1 for "100%".
Alright, so I have searched the Internet, I have looked at at the very least twenty different posts on this site, and spent several hours with this issue and either I am blind, or perhaps rustier at this than I thought. I have two divs within a wrapper- the left div is float:left, and I want to space them apart from one another, but when I add padding or margin to the left side of the right div nothing happens. If I manually add space using the code for space, it pushes the paragraph down rather than over. I am at a loss, I tried using inline-block display, I tried floating the right paragraph. The only thing that sort of worked was adding right padding to the left box, but because the content in the left box is centered it then messed up the display of the left box. I uploaded the site contents so you could see what I am talking about, and the stylesheet is pasted below. Any help with this would be greatly appreciated! I usually just use tables and iframes, but I got yelled at for that so I was trying to do this the "right way" (I guess?) for a friend. http://www.djcproductions.net/GSFlook/
/* CSS Reset */
* { margin: 0; padding: 0; }
body {
font-family:Tahoma, Geneva, sans-serif;
background-color:#282828;
}
#container {
width: 1024px;
height: 1200px;
background-image:url(../images/body_bg.jpg);
background-repeat: repeat-x 0 0;
margin: 0 auto;
padding: 0 2px;
}
#header {
width: 1024px;
height: 88px;
}
#nav {
clear: both;
height: 34px;
width: 1024px;
background-image:url(../images/nav_bg.jpg);
}
#nav ul {
float: left;
}
#nav ul li {
display: block;
float: left;
height: 34px;
list-style-type: none;
padding: 0 1px 0 0;
}
#nav ul li a {
color: #ffffff;
display: block;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 100%;
line-height: 34px;
padding: 0 0 0 18px;
}
#nav li a span {
display: block
float: left;
height: 100%;
padding: 0 18px 0 0;
}
#nav li a:hover, #nav li.active a {
background: url(../images/atab.jpg) no-repeat center;
color: #fff;
cursor: pointer;
text-decoration: none;
}
#homegallery {
width: 1024px;
max-height: 302px;
padding: 37px 0 0 49px;
}
#preview_box{
width: 390px;
height: 236px;
background-image:url(../images/preview_bg.jpg);
background-repeat:no-repeat;
padding: 24px 0 0 0;
}
#preview_shadow{
width: 390px;
height: 236px;
background-image:url(../images/filler.png);
float: left;
padding: 0 0 0 0;
}
.shadow{
-moz-box-shadow: 2px 5px 5px 1px #ccc;
-webkit-box-shadow: 2px 5px 5px 1px #ccc;
box-shadow: 2px 5px 5px 1px #ccc;
}
#content{
padding: 118px 0 0 33px;
}
#scroller{
background-image:url(../images/scroller_bg2.jpg);
background-repeat:no-repeat;
position: relative;
width: 202px; /*marquee width */
height: 267px; /*marquee height */
overflow: hidden;
padding: 0 0 0 0;
float: left;
}
#scroller_content{
width: 98%;
position: absolute;
padding: 20px 0 0 0;
}
#scroll{
font-family:Tahoma, Geneva, sans-serif;
color: #8f8f8f;
}
#scroll li{
padding-top:5px;
list-style-type:none;
}
#company_info{
font-family:Tahoma, Geneva, sans-serif;
color: #000000;
width: 90%;
padding: 0 0 0 0;
}
p {
font-family:Tahoma, Geneva, sans-serif;
text-indent: 30px;
line-height: 25px;
}
The div
<div id="company_info">
Is not floating, but the div to the left of it with id=scroller is.
For a quick solution, you will need to make #company_info:
#company_info {
float: left;
width: 70%;
margin-left: 20px;
}
Also make sure to clear float after those two divs!
You didn't post HTML so I made my own markup, with the parameters you were looking for:
HTML
<div class="container">
<div class="left">
<p>Services</p>
</div>
<div class="right">
<p>Our company</p>
</div>
CSS
p {margin-left: 30px; font-family: Arial, sans-serrif; color: #FFF;}
.container {
margin: 0 auto;
width: 620px;
height: 400px;
padding: 10px;
background: #CCC;
}
.container .left {
margin: 0 auto;
float: left;
width: 300px;
height: 390px;
background: #999;
}
.container .right {
margin: 0 auto;
float: right;
width: 300px;
height: 390px;
background: #666;
}
jsFiddle
So I have a div that is supposed to have 100% height. It's only parent element is <body>, so 100% should be the height of the window. But instead of spanning the height of the screen, it only is as high as the container element inside it. The funny thing is, if I use fixed positioning, it does what I want it to. Alas, I can't use fixed in the site layout. Here is my css. If you would like to see what the site looks like right now, here is the link: http://ion.comli.com/projects/
body, ul {
margin: 0;
padding: 0;
}
body {
background: url('/images/background.png') no-repeat fixed;
}
/* CONTENT */
.content{
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50px;
left: 15%;
height: 100%;
width: 70%;
background-color: #ffffff;
}
/* END CONTAINER*/
/* CONTAINER */
.container{
background: #ffffff;
margin: 5% 10%;
text-align: center;
}
.container .title a {
font-family: Franchise, "sans-serif";
font-size: 48px;
color: black;
line-height: 48px;
text-align: center;
text-decoration: none;
}
.container .date {
font-family: Ubuntu, "sans-serif";
font-size: 12px;
color: #666666;
line-height: 12px;
text-align: center;
text-decoration: none;
}
.container .body {
font-family: Ubuntu, "sans-serif";
font-size: 16px;
text-align: left;
}
/* END CONTAINER */
/* PROJECT */
.project {
display: block;
margin: 5% auto;
height: 100px;
width: 500px;
border-radius: 10px;
background: url("/images/background.png");
opacity: 0.5;
}
.project h2 {
font-family: Franchise;
font-size: 48px;
color: white;
text-align: center;
}
/* END PROJECT */
/* NAVIGATION */
nav ul {
background-color: #1b1b1b;
display: table;
list-style: none;
position: fixed;
top: 0;
height: 50px;
width: 100%;
box-shadow: 0 0 6px #888888;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: Ubuntu;
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
background-color: #1b1b1b;
}
nav #menu {
padding: 0 25px;
background-color: #1b1b1b;
}
nav #menu:hover {
box-shadow: none;
background-color: #292929;
}
nav li:hover #menu {
box-shadow: none;
background-color: #292929;
}
nav ul ul {
background: #292929;
display: none;
position: absolute;
top: 100%;
right: 0px;
width: 15%;
}
nav ul ul li {
background: #292929;
float: left;
position: relative;
clear: both;
}
nav ul li:hover > ul {
box-shadow: none;
display: block;
}
/* END NAVIGATION */
/* SCROLLBAR */
/* END SCROLLBAR */
Any way I can get this div to span the whole 100%? I'm pretty sure there is a simple answer to this question, but I can't find it. Thanks in advance!
You have to make sure all parents of .content have a height defined.
So in your case what is missing is:
html, body {
height: 100%;
}
Alternative
Or you could position .content as fixed and you'd have the same effect but with a different approach
.content {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
Make body 100% high
html, body {
height: 100%;
}
I have add the footer to EasyCareBath.com, and I can get the div to work properly except for ".footer_box", it will not center. I have added "left: 15%" and when you blow the window up, it's no longer aligned. Am I missing something or did I do too much to the css?
.footer_spacer {
height: 50px;
}
.footer_wrapper {
height: 375px;
background-color: #e6dccb;
}
.footer {
border-top: 10px solid #789E65;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
margin-top: 0px;
/*min-width: 1007px;*/
height: 235px;
background-attachment: scroll;
background-image: url(../images_footer/footer_bg.png);
background-repeat: repeat-x;
background-position: center top;
position: relative;
}
.footer_box {
height: 236px;
width: 1007px;
/*position: relative;*/
}
.footer_copyright {
width: 100%;
/* [disabled]height: 100px; */
/*float: left;*/
padding-top: 15px;
position: relative;
text-align: center;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 100;
font-variant: normal;
text-transform: none;
color: #354245;
}
#footer_col_01 {
position:absolute;
left:11px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_02 {
position:absolute;
left:186px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_03 {
position:absolute;
left:361px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_04 {
position:absolute;
left:535px;
top:3px;
width:183px;
/*height:230px;*/
z-index:1;
}
#footer_col_05 {
position:absolute;
left:728px;
top:3px;
width:265px;
/*height:230px;*/
z-index:1;
font-size: 14px;
}
footer {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size: 11px;
float: left;
width: 100%;
}
footer a {
color: #FFF;
text-decoration: none;
}
footer a:hover {
color: #FFF;
text-decoration: underline;
}
footer h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 500;
color: #00A1CC;
line-height: 46px;
/*margin-bottom: -2px;*/
}
footer li {
line-height: 18px;
list-style-type: none;
margin-left: 12px;
}
.footer_img_center {
text-align: center;
}
Alter your .footer_box rule to this:
.footer_box {
height: 236px;
width: 1007px;
margin: 0 auto;
position: relative;
}
The margin: 0 auto; centers the footer_box.
The position: relative; makes it so your absolutely positioned columns are positioned based on the footer_box instead of the body.
Side note / an analogy I've always liked:
Think of the 'auto' as attaching a rubber band to that side of the item connected to the edge of the page... in this case, 'auto' is on the right AND the left, so - if there's a rubber band pulling from both left AND right, it will always center, regardless of screen size.
Fix your css as following:
.footer_box {
height: 236px;
margin: 0 auto;
position: relative;
width: 1007px;
}
You were on the right track:
.footer_box {
height: 236px;
width: 1007px;
position: relative;
margin: 0px auto;
}
The auto margin on left and right will make sure the footer is always centered, no matter what the screen size is.