I want to create a <div> which has a Label/Header displayed in Capitals letters. The <div> is 250px wide.
Inside the <div>, I will place another <div> which will contain controls. This inner <div> should be center aligned and the outer <div> should automatically increase its height to accommodate the controls height.
The outer <div> and inner <div> should have a border.
Is this possible with CSS?
im not sure what you are asking but maybe this will help?
<!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>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div#wrapper { display:block; width:250px; height:auto; margin:auto; padding:0; border:1px solid #F00; }
div#wrapper h1 { text-transform:uppercase; text-align:center; }
div#controls { display:block; width:100%; height:100px; margin:0; padding:0; border:1px solid #000; text-align:center; }
div#controls a { display:inline; margin:0 5px; line-height:100px; }
</style>
</head>
<body>
<div id="wrapper">
<h1>header</h1>
<div id="controls">
control
control
control
</div>
</div>
</body>
</html>
You mean like this?
<style type="text/css">
.panel { width: 250px; padding: 5px; border: 1px solid #666; }
.panel h1 { margin: 0 0 5px; padding: 0; text-transform: uppercase; }
.panel .content { padding: 5px; border: 1px solid #666; }
</style>
<div class="panel">
<h1>Title</h1>
<div class="content">
... controls ...
</div>
</div>
Related
Here is a simple HTML file with inline css:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body {
margin-top: 20px;
margin-right: 500px;
margin-left: 500px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
font-family: Arial;
font-weight:bold;
}
</style>
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
The large red rectangle is correct. BUT why are the words EVENTS and Sections not vertically centered? It seems quite simple and yet it doesn't look correct.
vertical-align:middle; works only when parent has display:table and children display:table-cell
Take a look:
body {
margin-top: 20px;
margin-right: 100px;
margin-left: 100px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
display:table-cell;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
display:table-cell;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
width:100%;
font-family: Arial;
font-weight:bold;
display:table;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
Here is how you do it :
#divA {
display:block;
background: #BB1919;
color:white;
height:100px;
padding:20px;
box-sizing:border-box;
}
.divA {
display:table;
width:100%;
height:100%;
}
.events,
.sections {
display:table-cell;
font-size: 20px;
vertical-align:middle;
}
.divB {
display:table;
width:100%;
height:100px;
background:#f5f5f5;
padding:20px;
box-sizing:border-box;
}
<h2>If you need Outer Div</h2>
<div id="divA">
<div class="divA">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
</div>
<h2>If you dont</h2>
<div class="divB">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
The css property vertical-align will align elements on the same line. As you can see in the example below, three divs are centered through the middle because of that property. Vertical-align will not center text inside an element, though.
One way to achieve that without tables is to set the line height property to the same height value of the container. In the example below, the container is 60px tall and so is the text line. This method works if the text is contained in one line only.
div {
display: inline-block;
border: 1px solid black;
vertical-align: middle;
}
.lg {
height: 60px;
}
.sm{
height:40px;
}
.centerTxt{
line-height: 60px;
}
<div class="sm">
Small
</div>
<div class="lg">
Large
</div>
<div class="lg centerTxt">
Large centered text
</div>
Scenario
I've got the following code:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
What the code should do
Displaying a fixed header with the title "Material Design!" and an icon
What isn't working
Text and icon are not aligned
My question
How can I solve this problem?
As you can see if you add a yellow outline to the image, they are aligned. The bottom of the image sits on the same line as the text.
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
img { outline: solid yellow 1px; }
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
You can adjust that with vertical-align:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
img { outline: solid yellow 1px; vertical-align: top; }
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
… but ultimately you'll probably want to edit the image to adjust the amount of whitespace it has in it.
Try
.title img{
vertical-align: middle;
}
You just need to vertically align the icon:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
.title img {
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
you can use this code
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
span{
background-image: url("http://stubborn.altervista.org/options.png");
background-repeat: no-repeat;
background-position: center left;
padding-left: 30px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><span> Material design!</span></div>
</div>
</body>
</html>
or you can float left image an change padding left.
or you can vertical-align: middle for image
good luck
I am using visual studio 2013
I am trying to make a website divided like this
this is my Html code;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My Website</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id ="wrapper">
<div id =" banner">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id ="sidebar">
</div>
<div id=" footer">
<p> AlL rights reserved.</p>
</div>
</div>
</form>
</body>
</html>
and this is th css code
body
{
font-family:'Calibri',Verdana , sans-serif;
background-color: #e9e9e9;
}
#wrapper
{
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner
{
height:200px;
border: 3px solid #E3E3E3;
}
#navigation
{
height: 60px;
border: 3px solid #e3e3e3;
margin-top: 20px;
}
#content
{
float:left;
width: 750px;
margin: 20px 0 20px 0;
padding : 10px;
border: 3px solid #e3e3e3;
}
#sidebar
{
float:right;
width: 250px;
height: 400px;
margin: 20px 10px 20px 10px;
border: 3px solid #e3e3e3;
}
#footer
{
clear:both;
width:auto;
height:40px;
margin-top:20px;
}
the problem that it apear like this:
can any one help ? I dont know where is the problem
Demo Fiddle
Nice and simple
Add overflow:hidden; to #wrapper, this wil stop your floated elements from extending beyond the underlying parent without forcing its expansion.
Update:
If you want to ensure correct flow with your layout, wrap the content and sidebar elements in another div with overflow:hidden set (per jsfiddle link above)
It is happen because you have lost layout. Please read about "HasLayout" on the web to avoid this in future
Add please
CSS
#wrapper {
overflow:hidden
}
I'm attempting to insert a vertical line into my code that runs along a certain path of text.
My full code thus far is:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div>
<section>
<h1> Test</h1>
</section>
<img src="thingvellir.jpg "class="vinstri" height="300" />
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And this is my CSS file:
body {
background-color:green;
}
div{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
Now it's this last attribute that should make the vertical line, but what it does instead of trailing the text, is that it makes a vertical line along the WHOLE ORIGINAL div box (and for some reason adds black border around as well as pushing the text down) as displayed here.
Any ideas on how to fix this one? Thanks.
Your DIV rule applies to every DIV, both the one immediately inside BODY and your DIV.vert. So, the first DIV rule in your CSS, applying the full black border, applies to every DIV in your code. I'm assuming you only want this to apply to the top DIV instead, rather than to everything.
So give that top DIV it's own class, and update that first rule to use the class name.
This way, your DIV.vert box, where you want the red left line won't also pick up the additional CSS rules.
Updated HTML:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div class="main">
<section>
<h1> Test</h1>
</section>
<div class="vert">
<img src="thingvellir.jpg "class="vinstri" height="300" />
</div>
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And your CSS:
body {
background-color:green;
}
div.main{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
i keep getting unwanted top margin and cant remove it, i tried everything, this is affected one of my other projects as well, could find any solution. please help
heres my html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joy The Designert</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body topmargin=0 marginheight=0>
<div id="Wrapper">
<div id="topBanner"><div class="container"><h2>top banner content</h2></div></div>
<div id="nav"><div class="container">Navigation Text<?include ("navigation.php");?></div></div>
<div id="featured"><div class="container"></div></div>
<div id="info"><div class="container">test</div></div>
<div id="support"><div class="container">test</div></div>
<div id="footer"><div class="container">testing footer<?include ("footer.php");?></div></div>
</div>
</body>
</html>
and heres my css content:
#charset "utf-8";
/* CSS Document */
html {
margin:!important 0px;
padding:0px;
}
body {
margin-top:!important 0px;
margin-left:0px;
margin-right:0px;
margin-botton:0px;
padding:0px;
border:none;
color: #292929;
font-family: Arial,Helvetica,sans-serif;
font-size: 81.25%;
}
#wrapper {
margin:0px;
Width:1000px;
height:auto;
}
.container {
width:900px;
margin:auto;
}
#topBanner{
background-image:url(images/scr_gray-bkgd.png);
background-repeat:repeat-x;
height:44px;
width:100%;
}
#nav{
height:72px;
width:100%;
padding
color:#666666;
background-color: #F5F5F5;
border-bottom: 1px solid #FFFFFF;
box-shadow: 0 -5px 5px #5A595D;
color: #666666;
font-weight: bold;
height: 72px;
}
#featured {
min-height:420px;
width:100%;
background: url(none) no-repeat scroll center top #ECECEC;
border-bottom: 1px solid #FFFFFF;
}
#info{
background: url(images/gradient-bg.png);
background-repeat:repeat-x;
height: 256px;
width: 100%;
}
#support{
background-color: #F5F5F5;
border-top: 1px solid #FFFFFF;
box-shadow: 0 5px 5px #5A595D;
height:55px;
width:100%;
}
#footer{
width:100%;
height:150px;
background-image:url(images/scr_gray-bkgd.png);
background-repeat:repeat;
}
#topBanner h2{
margin:0px;
}
This should solve it ;)