See image below. Notice the left and right borders are not filling the available space. These are nested divs. How do i get it to obey auto?
CSS class MiddleLeftBorder and MiddleRightBorder are not working as expected.
CSS Code below:
html, body
{
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
body
{
background-color: #000000;
background-image: url('/CatwalkCloset/App_Themes/Default/Images/Background.jpg');
background-repeat: repeat;
color: #FFFFFF;
}
/* TEMPLATE */
container
{
height: auto;
margin: auto;
width: 100%;
}
div.content
{
clear: both;
height: auto;
margin: 0px auto;
text-align: center;
width: 1024px;
}
div.rows div.row
{
clear: both;
width: 1024px;
}
div.rows div.column
{
float: left;
}
div.rows div.clear-row
{
line-height: 0px;
font-size: 0px;
clear: both;
}
div.logo
{
background: url('/CatwalkCloset/App_Themes/Default/Images/Logo.jpg');
height: 150px;
width: 510px;
}
div.logoSpace
{
background-color: #000000;
}
div.menu
{
background: url('/CatwalkCloset/App_Themes/Default/Images/MenuBackground.jpg');
background-repeat: repeat;
height: 40px;
width: 1024px;
}
div.topLeftBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/TopLeftBorder.jpg');
float: left;
height: 40px;
width: 40px;
}
div.topMiddleBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/TopMiddleBorder.jpg');
background-repeat: repeat;
float: left;
height: 40px;
width: 944px;
}
div.topRightBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/TopRightBorder.jpg');
float: left;
height: 40px;
width: 40px;
}
div.middleLeftBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/MiddleLeftBorder.jpg');
background-repeat: repeat;
float: left;
height: 100%;
width: 40px;
}
div.middleContent
{
float: left;
height: 100%;
width: 944px;
}
div.middleRightBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/MiddleRightBorder.jpg');
background-repeat: repeat;
float: left;
height: 100%;
width: 40px;
}
div.bottomLeftBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/BottomLeftBorder.jpg');
float: left;
height: 40px;
width: 40px;
}
div.bottomMiddleBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/BottomMiddleBorder.jpg');
background-repeat: repeat;
float: left;
height: 40px;
width: 944px;
}
div.bottomRightBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/BottomRightBorder.jpg');
float: left;
height: 40px;
width: 40px;
}
The HTML Code Below uses the CSS code above:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="cphMasterHead" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="fMaster" runat="server">
<div id="container">
<div class="content">
<div class="rows">
<div class="row">
<div class="logo"></div>
<div class="logoSpace"></div>
<div class="clear-row"> </div>
</div>
<div class="row">
<div class="menu"></div>
<div class="clear-row"> </div>
</div>
<div class="row">
<div class="topLeftBorder"></div>
<div class="topMiddleBorder"></div>
<div class="topRightBorder"></div>
<div class="clear-row"> </div>
</div>
<div class="row">
<div class="middleLeftBorder"></div>
<div class="middleContent"><asp:ContentPlaceHolder id="cphMasterBody" runat="server"></asp:ContentPlaceHolder></div>
<div class="middleRightBorder"></div>
<div class="clear-row"> </div>
</div>
<div class="row">
<div class="bottomLeftBorder"></div>
<div class="bottomMiddleBorder"></div>
<div class="bottomRightBorder"></div>
<div class="clear-row"> </div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Why are you using images for something which can be done with pure CSS (border-radius)? I mean that frame in #content. But ok..
First of all make sure that images are in path you wrote (use F12 and Network tab to see if there aren't any errors), because CSS classes and HTML markup looks correct. Not good, just correct.
Since you use fixed width for .row, .middleContent, .middleLeftBorder and .middleRightBorder, there's no need to use 3 images for buiding your background - you can use them combined as one background for .row. Also there's no need to use div.clear-row while you have clear: both; in .row
I think there's too much to improve here..
Ok, about rounded corners. You can achieve something what I think you want with this code (loosely related to yours):
<div id="container">
<div id="content">Some text here</div>
</div>
<style>
#container {
width: 200px;
padding: 15px;
background-color: #000;
}
#content {
padding: 30px; /* real content must be moved away from border */
border: 1px solid #fff;
color: #fff;
width: 138px; /* #container width - 2*padding - 2*border */
border-radius: 20px; /* Basic CSS */
-moz-border-radius: 20px; /* Mozilla */
-webkit-border-radius: 20px; /* Safari, Chrome */
-o-border-radius: 20px; /* Opera */
-ms-border-radius: 20px; /* IE9+ */
}
</style>
You should get white rectangle with rounded corners on black background.
Related
I want to have an image centered within each DIV that is floating left within a larger DIV.
In the following example, I want the gray boxes ("assetInfoBody") to be centered within the green boxes ("assetBox"). What else can I try here beside text-align:center and margin:auto?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#assets {
background-color: orange;
padding: 5px;
width: 100%;
height: 100%;
}
.assetbox {
background-color: lightgreen;
float: left;
width: 100px;
margin-right: 5px;
text-align: center;
}
.assetInfoBody {
background-color: grey;
position: relative;
width: 80px;
text-align: center;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
top: 0px;
}
</style>
</head>
<body>
<div id="assets">
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
See this example for a reference to how you could achieve this. As your class .assetInfoBody class has a set width you can align the .centeredItem by applying the rule margin:0 auto to it. By also applying text-align:center to .centeredItem you're able to always keep the image centered within it.
probably you want a css like that:
#assets {
background-color: orange;
padding: 5px;
width: 100%;
}
.assetbox {
background-color: lightgreen;
display: inline-block;
width: 100px;
margin-right: 5px;
}
.assetInfoBody {
background-color: grey;
margin: 0 auto !important;
width: 80px;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
}
I seem to be having a problem with my footer growing to 100% width of the page. Currently when it expands there is a gap on each side of the footer. I tried putting the footer outside the the wrapper and inside and pretty much get the same results. I've attached my code to see if anyone can spot what im doing wrong.
<div id="wrapper"> <!--Begin Wrapper -->
<div id="riaandoviwrap">
<div id="riaandovi">Ria And Ovi</div>
</div>
<div id="slideshowwrap">
<div id="slideshow"><img src="images/DSC00495.JPG" /></div>
</div>
<div id="slideswrap">
<div id="slide1">SLIDE 1</div>
<div id="slide2">SLIDE 2</div>
<div id="slide3">SLIDE 3</div>
</div>
<hr />
<div id="contentwrap">
<div id="content"></div>
</div>
<div id="footerwrap">
<div id="footerleft">© 2012 Ria and Ovi</div>
<div id="footerright">Share this on:</div>
</div>
</div> <!--End Wrapper -->
body {
background: #f7f6f6;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#wrapper {
width: 100%
}
#riaandoviwrap {
width: 300px;
min-height: 150px;
}
#riaandovi {
font-family: Script;
font-size: 75px;
}
#slideshowwrap {
width: 950px;
background: url(../images/slider-bg2.png);
clear: both;
}
#slideshow {
min-height: 350px
}
#slideswrap {
width: 950px;
min-height: 100px;
background: #09F;
margin-top: 6px;
clear: both;
}
#slide1 {
width: 300px;
float: left;
}
#slide2 {
width: 300px;
float: left;
}
#slide3 {
width: 300px;
float: left;
}
#contentwrap {
}
#content {
}
#footerwrap {
min-height: 105px;
background: url(../images/footer-bg.png);
margin: 0px;
}
#footerleft {
width: 350px;
float: left;
}
#footerright {
width: 350px;
float: left;
}
hr {
max-width: 950px
}
img {
border: 5px solid #FFF
}
Set padding and margin to zero for the body tag. Althought you're not setting one manually, browsers do have a default padding/margin.
Include a reset sheet in your document to reset all of those default styles. Recommend Eric Meyer's since its more complete:
http://meyerweb.com/eric/tools/css/reset/
Given this HTML:
<div id="div1">
<div id="div1a"></div>
<div id="div1b"></div>
<div id="div1c"></div>
<div id="div1d"></div>
</div>
<div id="div2a"></div>
Can I get this structure using CSS display property?
Sure, it can be done with the following CSS:
/* Height of the top box. Change as needed to suit your layout */
#div1a {
height: 50px;
}
/* 3 left side boxes. Again, alter the height/width as needed. If you change
the width, you'll need to update the margin-left on #div2a as well. */
#div1b, #div1c, #div1d {
width: 100px;
height: 60px;
/* This bit causes them to float to the left in a vertical row of boxes */
float: left;
clear: both;
}
/* Increased height of the last box on the left */
#div1d {
height: 200px;
}
/* Main content box on the right. min-height can be changed as needed.
The margin makes room for the 3 boxes floating down the left side.
You read its properties as margin: top right bottom left; */
#div2a {
min-height: 365px;
margin: 0 20px 0 140px;
}
/* Generic margin/padding for all <div>'s */
div {
margin: 5px;
padding: 5px;
}
/* Remove the generic margin for #div1 */
#div1 {
margin: 0;
}
Demo of it in action.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
.mask{
position: relative;
overflow: hidden;
margin: 0px auto;
width: 100%;
background-color: #f4f4f4
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.colleft{
position: relative;
width: 100%;
right: 84%;
background-color: #f4f4f4
}
.col1{
position: relative;
overflow: hidden;
float: left;
width: 82%;
left: 101%;
background-color: #e6e6e6
}
.col2{
position: relative;
overflow: hidden;
float: left;
width: 14%;
left: 3%;
background-color: #e6e6e6
}
.footer{
float: left;
width: 100%;
background-color: #b4caf7
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
<div class="header">
DIV1A
</div>
<div class="colleft">
<div class="col1">
DIV2A
</div>
<div class="col2">
<div id="div1b">DIV1B</div>
<div id="div1c">DIV1C</div>
<div id="div1d">DIV1D</div>
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
Can anyone see why the following does not quite work. The image is vertically centered within 'VCentInner' correctly but the following Title text seems to align with the image top rather than being vertically within VCentInner.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
}
#header{
position: absolute;
top: 0px;
height: 10em;
width: 100%;
background-color: blue;
}
.VCentOuter {
top: 0; left: 0; width: 100%; height: 100%; position: absolute; display: table;
background-color: green;
}
#headinner{
height: 8em;
background-color: yellow;
}
.VCentInner {
display: table-cell; vertical-align: middle;
background-color: pink;
}
#header img {
float: left;
<!--height: 2em;-->
background-color: yellow;
}
#title{
text-align: center;
color: black;
}
#clearheader{
height: 10em;
}
.centered{
display: block;
margin-left: auto;
margin-right: auto;
}
.txtcenter{
text-align: center;
}
#content{
border: 1px red dotted;
}
#menu {
position: absolute;
bottom : 0px;
width:100%;
height: 2em;
background: cyan;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="clearheader"></div>
<div id="content">
Content
</div>
</div>
<div id="header">
<div class="VCentOuter" id="headinner">
<div class="VCentInner" id="title">
<img src="images/burgee2.gif"/>
Title text
</div>
</div>
<div id="menu">
Menu goes here - tab1 - tab2 - tab3 - tab4 - tab5 - tab6 - tab7 - tab8 - tab9 - tab10 - tab11 - tab12
</div>
</div>
</body>
</html>
Unless that image needs to be a link (or otherwise an actual element), the easiest solution is probably to make it into a CSS background-image:
<div class="VCentInner" id="title">
Title text
</div>
With extra CSS:
#title {
background: url(http://dummyimage.com/100x100/000/fff) left center no-repeat
}
If it does need to be an element:
<div class="VCentOuter" id="headinner">
<div class="VCentInner" style="width: 100px">
<img src="http://dummyimage.com/100x100/000/fff" />
</div>
<div class="VCentInner" id="title">
Title text
</div>
</div>
I have a container layer with a width of 850px. Inside of that i have 4 layers displayed as inline-blocks floating left, each of which are 100px high and 200px wide.
How can i space them so the outside ones line up at the edges of the container div but are spaced evenly within?
css
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background-color: #09F;
}
html
<div id=content>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
It's not really going to work, because you have a container that's 850px wide and you're trying to spread 4 200px wide containers with three gutters between them. 4*200 = 800 so you have 50px spread in which to split 3 gutters 50/3 is 16.6666ish which isn't going to work for pixels.
The following works, but I don't know how useful it is for you.
#content {
width: 848px;
margin-right: auto;
margin-left: auto;
background: #666;
overflow: hidden;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
#featured.first { margin-left: 0px;}
<div id=content>
<div id=featured class="first"></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
There are a couple of ways to do this. One cross-browser solution I have found is to use an extra wrapper div and get creative with it's true dimensions and negative margins.
<div id="content">
<div class="kludge">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>
</div>
I changed id=featured to a class name because ids should be unique if you want your HTML to be valid.
The CSS:
#content {
width: 850px;
margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
width: 900px; /* create room for the right hand margin of last item */
margin-right: -50px;
}
.featured {
display: block; /* inline-block not necessary for floated elements */
height: 100px;
width: 200px;
float: left;
margin: 0 10px;
background-color: #09F;
}
I think the easiest way is:
<style>
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
border:1px solid #000
}
#featured1 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 0px;
margin-top: 10px;
background-color: #09F;
}
#featured2 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
</style>
</head>
<body>
<div id=content>
<div id=featured1></div>
<div id=featured2></div>
<div id=featured2></div>
<div id=featured2></div>
</div>
Maybe not what you need, but If IE6 support is not important pseudo selectors are perfect for this, and avoid any HTML fudges (tested in IE7, FF3.5):
CSS:
#content {
width: 848px;
margin: 0 auto;
overflow: auto;
}
.featured {
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
.featured:first-child {
margin-left: 0;
}
HTML:
<div id="content">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>