I didn't really know how to word this question, but anyway, My website
kind of looks rather weird at the moment. I had it looking perfectly well, however i changed it due to the fact that the Footer was taking up the whole main section of the page (and i wanted to add color variations between the footer and main section).
So what i would like to know is how do i get the Main Area Text background color cover everything from the navbar to the footer (as wide as the navbar also)? I would make change it to using pixels, but wouldn't that mean to much guessing as you decide to change it? Surely there is an easier way!
Thanks to any help provided
Code:
.mainsection{
float:left;
width: 660px;
margin:30px;
background-color:#999;
}
.center{
background-color:#999;
}
HTML:
<div class="center">
<section class="mainsection">
<p>Main Area</p>
</section>
<aside class="sidenews">
This is the side news
</aside>
</div>
How about:
html {
background: #999;
}
or
body {
background: #999;
}
?
Another thing you can try is wrapping all the areas you want a certain background color in a div, then set that div's class and do a background color property in that class. You'd have to remove background color property from the rest of your classes for this to work. You can further control it with !important.
try this ; create one new class for all main page like .center and add below styles in that i hope this is help you.
body{background:#999;width:100%;height100%;}
.center{margin:auto; width:960px;}
Related
I am currently working on a website that uses this navigation bar.
I didn't include it in the picture for the sake of space, but the brown portion stretches to both edges of the page. How can I stop this from happening?
This is my HTML within the page:
And this is my CSS:
Thank you!
#navbar {
display: inline-block;
}
You can also add a width attribute to define exactly how wide you want it.
this might help
width:400px;
margin:auto;
I am using a background image for my top "heading" div section of my website. It was drawn on CorelDrawX6 and exported to a .jpg image, meaning I can't set the height and width exactly right when exporting. What I want to achieve is have the webpage scale the background image to the right height. I want to have height:150px; width:100%, but because it is applied to the div like this:
<div style = "height:150px;background-image:url('Design.jpg');">
I can't apply styling directly to the image. Does anyone have a solution?
P.S. I have checked out many of the "related questions" and have not found an answer. Also, please bear in mind I want a background image for one div, not the whole page (which would be a lot easier).
Current situation:
My desired situation is to have the full image as a background (the current image is a scaled-up version, the real image (which I could not upload) looks the same but has text on, and the light blue bar is much smaller).
try
HTML
<div class="lorem" alt="lipsum" title="lorem lipsum">
<img class=ImgLorem></img>
</div>
CSS
.lorem{
}
.ImgLorem{
}
.lorem img{
background: url(Design.jpg);
height:150px;
width:100%;
}
this should work.
Let me know.
This is what you looking for?
background-size: auto 150px;
I am wanting to use an image as a border but just for the bottom - can this be achieved in CSS? I have briefly researched it and im reading about slices etc but I dont quite understand it.
I thought there might be something like border-bottom-image or similar to that...
Thanks
Perhaps think of this in another way. You want an image to appear along the bottom of an element. It might look like a border, but it doesn't have to be called one. An easy way to get the visual effect you are seeking is to place some padding on the element and place the image as a background image in that padding area. E.g.
element {padding-bottom: 20px; background: url(bgimage.png) no-repeat 50% 100%;}
First make your HTML something like this:
<div class="container block">
<div class="content block">
<---!Putt content here!--->
<div class="border-bottom block">
<---!Make it empty!--->
</div>
</div>
</div>
Then make the css something like this:
.block
{
display:block;
position:relative;
width: xpx; /*choose your width (x) */
}
border-bottom
{
background: url('picture url');
}
ps: you can repeat this as much as you want and you'll have always the style for those classes (just copy and past the HTML code)
you can use this css property:
border:solid;
border-bottom-width:10px; //thickness of border
border-image:url(image.jpg) 0 0 20 0 repeat; //20 is length of your image
I went to my friend's house to see how my webpage displays on other resolutions, but found that the background image didn't reach the sides. So, I went home and did some research and was told that instead of having my background image in the body tag, I should create a div inside of the body tag before the container div and it would work.
This did work for one of my designs but not in the other - the code was exactly the same, but the images weren't.
I tried adding position:absolute in my CSS and it does show, but it has a strange white border along the top and left hand side.
How can I resolve this issue?
HTML:
<html>
<head></head>
<body>
<div class="background">
</div>
<div class="container">
</div>
</body>
</html>
CSS:
body{
text-align:center;
}
.background{
background:url('images/background.png')no-repeat;
width:100%;
height:100%;
background-position:center;
}
Not quite enough information to really give you a good answer... but the white line on the top and left of the page sound like the natural margin appended to the body tag. If you add this to your css it should remove that:
body {
margin: 0px;
}
Also, the background image "reaching the sides" will be primarily dependent on the image's dimensions relative to the viewing screen resolution and browser size. These factors are out of your control so be cautious where you're using an image in the background of your designs.
I'm having a very hard time trying to come up with html/css for a layout to suite the following:
Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.
I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?
There's several ways to go about this. Here's one not particularly fancy but straight-up way to go about it:
<body>
<div id="menu">MENU</div>
<div id="content"> content <br /> content <br /> content </div>
</body>
CSS:
div { border: 2px solid black; } /* demo purposes */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 154px; /* menu width + (2 x menu.border-width) */
}
See this jsfiddle for a working sample.
This solution has the added benefit that your content region will take up exactly 100% of the remaining width of its parent:
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
CSS:
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }
Excellent tutorial on fluid layouts: http://www.alistapart.com/articles/holygrail
Works in IE7 and newer, Safari/Chrome/Opera/Firefox...
The best way to do this is by using the already considered safe to use box-sizing property.
Take a look at the tinkerbin -> http://tinkerbin.com/AcJjYk0r
It works as you want it to. Fixed width for the menu, percentage based width for the content area.
Then...
...if you want the background-colors to expand to the highest of the heights between the two boxes (remember, one times the menu can be higher than the content box, and vice-versa), then the only way to go about it (no javascript) is to use a background image and place it below the two boxes. With css3 gradients (safe to use too) it's pretty easy. Take a look:
http://tinkerbin.com/3ETH28Oq