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>
Related
This question already has answers here:
Using only CSS, show div on hover over another element
(14 answers)
Closed 8 years ago.
I'm trying to get it so that when someone hovers over a div box it will display a separate div box below it. How would I go about doing this?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="center">
<div id="content">
<h1>Home</h1>
<div id="product1"></div>
<div id="product1hover"></div>
<div id="product2"></div>
<div id="product2hover"></div>
<div id="product3"></div>
<div id="product3hover"></div>
</div>
</div>
</body>
</html>
CSS:
#center
{
position: relative;
margin: auto;
width: 1000px;
height: 600px;
top: 20%;
border:5px solid;
border-radius:15px;
background-color: #305052;
}
#product1
{
position: relative;
float: right;
margin-top: 50px;
margin-right: 40px;
margin-left: 10px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
#product1:hover
{
#product1hover
}
#product2
{
position: relative;
float: right;
margin-top: 50px;
margin-left: 10px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
#product3
{
position: relative;
float: right;
margin-top: 50px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
If you change your HTML as follows
<div id="product1">
<div id="product1hover"></div>
</div>
The following css will do
#product1hover{
display:none;
}
#product1:hover #product1hover{
display:block;
}
Update
With your existing HTMLyou can achieve this as follows:
#product1hover{
display:none;
}
#product1:hover + #product1hover{
display:block;
}
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;
}
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.
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>
%19 Left Section Width, %80 Content width:
But i want to fix left section to 200px and content section is the rest of viewable area's width.
How can i do this with CSS?
<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
div
{
border: 1px solid black;
}
#header
{
background: #0f0;
width: 100%;
}
#leftcol
{
background: #f00;
float: left;
width:19%;
/* max-width: 200px; */
height: 500px;
}
#content
{
background: #fff;
float: left;
width: 80%;
height: 500px;
}
#footer
{
background: #0f0;
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
Header Section</div>
<div id="leftcol">
Left Section</div>
<div id="content">
Content Section</div>
<div id="footer">
Footer Section</div>
</body>
</html>
There's plenty of ready made templates that would work here, take a look at these for example:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
http://bonrouge.com/2c-hf-fluid.php
Take a look: http://www.brunildo.org/test/lf100r.html