I can't get the img element to move to the left hand side. The left: 0px attribute isn't doing anything. In fact, I can't seem to move anything inside the #top div to move.
The img tag is inside top. I omitted rest of the webpage but I hope this is enough.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="topBorder"> </div>
<div id="top">
<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
</div>
</body>
</html>
CSS code:
body {
max-width: 60em;
margin: auto;
position: relative;
}
div {
border: solid;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
#topBorder {
background-color:#255FAA;
height: .7em;
width: 100%;
border: transparent;
}
#top {
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype;
}
#top img{
border: solid black;
position: relative;
left: 0px;
}
It looks like the text-align:center from your div element is the problem. Try overriding that in #top and I think it will start behaving as you expect. See this fiddle:
http://jsfiddle.net/3KyrW/
Your #top should have positive: relative, then your #top img should have position: absolute ... that will move the image around in your header.
I am not 100% sure about what how are trying to position. But adding a display: block; and a float: left; to #top img seems to float the image to the left. The left: 0px; is not needed when using position: relative; so I removed it. Also added a position: relative; to the #top <div>.
Also you seem to have inline styles in your <img> tag? That seems off.
<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
So I took that out & added it to the CSS as well. New <img> tag looks like this:
Revised CSS is here:
#top {
position: relative;
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype;
}
#top img{
border: solid black;
position: relative;
display: block;
float: left;
width: 50%;
height: 20%;
left: 2em;
}
Related
Just started coding CSS and having issues with a element (class is "strip") that seems to be invisible when I compile my code. If I set the position of the element to 'absolute' it seems to appear, however I need it to appear using 'relative' and this does not seem to be working.
The class of the div I am referring to is "strip", which at this point should appear as a red block in front of all other elements.
I've tried messing around with the z-index, but this hasn't seemed to change anything.
CSS:
.banner {
z-index: 2;
position: relative;
height: 56px;
width: 100%;
background-color: #F8F8F8;
margin: 0;
border-bottom-width: 1px;
border-bottom-color: #C6C6C6;
border-bottom-style: solid;
}
.header {
position: relative;
z-index: 3;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
font-family: "Titillium Web Regular", sans-serif;
text-transform: uppercase;
font-size: 12px;
bottom: 58px;
}
.logo img {
position: relative;
z-index: 4;
height: 50px;
width: 44px;
left: 3px;
bottom: 114px;
}
.strip {
position: relative;
bottom: 200px;
height: 100%;
width: 50%;
background-color: red;
z-index: 5;
}
body {
background-color: #d1e1ff;
margin: 0;
}
HTML:
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = banner>
</div>
<div class = header>
<h1>club quiz<h1>
</div>
<div class = logo>
<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
</div>
<div class = strip>
</div>
</body>
At this point, the in the "strip" class should be appearing as a red block in front of all other elements, however it is instead invisible.
Current Layout
Desired Layout
Basically I'm just looking to add a panel that runs down the centre of the page
Next to what Thanveer suggested
What exactly happening is - when you have
position:absolute; height:100%
it will occupy 100% of the screen and then you said bottom:200px so it will push this div from (0,0)(as it was absolute with respect to you body) to (0, -200). when you want this element to have
position:relative; height:100%
it will occupy the 100% of the parent element, which is body in your case that doesn't have any height.
So solution is either define some fixed height on body
body
{
background-color: #d1e1ff;
margin: 0;
height:500px;
}
OR
create parent wrapper on .strip and assign some height on that wrapper.
...
...
<div style="height:100px">
<div class="strip"></div>
</div>
...
...
Remember as you are trying to use position:relative;bottom: 200px;. it will be the real position of the .strip element (x,y) and then it will be push upward by 200 px to position will be (x, y-200).
Check the Fiddle
Hope it helps.
Use a fix height on class strip:
.banner {
z-index: 2;
position: relative;
height: 56px;
width: 100%;
background-color: #F8F8F8;
margin: 0;
border-bottom-width: 1px;
border-bottom-color: #C6C6C6;
border-bottom-style: solid;
}
.header {
position: relative;
z-index: 3;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
font-family: "Titillium Web Regular", sans-serif;
text-transform: uppercase;
font-size: 12px;
bottom: 58px;
}
.logo img {
position: relative;
z-index: 4;
height: 50px;
width: 44px;
left: 3px;
bottom: 114px;
}
.strip {
position: relative;
bottom: 200px;
height: 100px;
width: 50%;
background-color: red;
z-index: 5;
}
body {
background-color: #d1e1ff;
margin: 0;
}
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = banner>
</div>
<div class = header>
<h1>club quiz<h1>
</div>
<div class = logo>
<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
</div>
<div class = strip>
</div>
</body>
If you just want it to see using relative then all you have to do is give a fixed height inside your css
.strip {
height:200px;
}
And you have used a lot of position:relative in your code which is not necessary. So please check out how positioning in CSS works. That could make things much easier for you.
You can see my layout prototype on Design Prototype.
I have two : Header and Container. Header area must be placed above the container.
Header has two child elements: Logo DIV and Logo-Title DIV. Their positions being rated to parent [Header DIV].
So, I set position of header to relative and children (Logo and Logo-Title) to absolute.
But after it, Container didn't place under header area!
When i remove absolute position from Logo DIV and Logo-TITLE DIV, The Container is OK! but i can align logo and logo-title from parent(Header).
Why? Container isn't child of Header!
How can fix it?
Thanks.
Design Prototype
#charset "utf-8";
body{
margin: 0 auto;
width: 980px;
background-color: #f1f1f1;
}
#header{
position: relative;
background-color: yellow;
height: 154px;
}
#logo{
position: absolute;
background-color: green;
width: 123px;
height: 146px;
margin-top: 4px;
margin-left: 4px;
}
#logo-title {
position: absolute;
color: darkblue;
font-size: 16pt;
bottom: 0;
margin-left: 60px;
}
#container {
background-color: white;
height: 600px;
width: 980px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"/>
<div id="logo-title">Logo-Title</div>
</div>
<div id="container"></div>
</div>
</body>
</html>
The single tag closure used on your logo doesn't work on div element so I changed it like this
<div id="logo"></div>
Colored your container to red temporary, so one can see that it renders correct now
#charset "utf-8";
body{
margin: 0 auto;
width: 980px;
background-color: #f1f1f1;
}
#header{
position: relative;
background-color: yellow;
height: 154px;
}
#logo{
position: absolute;
background-color: green;
width: 123px;
height: 146px;
margin-top: 4px;
margin-left: 4px;
}
#logo-title {
position: absolute;
color: darkblue;
font-size: 16pt;
bottom: 0;
margin-left: 60px;
}
#container {
background-color: red;
height: 600px;
width: 980px;
}
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="logo-title">Logo-Title</div>
</div>
<div id="container"></div>
</div>
Your logo div has not correct syntax , closed always div with close div tag like this <div id="logo"></div>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Meriniuc Răzvan - Dumitru</title>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div id="header">
<h3>
Cv
</h3>
</div>
<div id="footer"></div>
</body>
</html>
.left {
border-radius: 10px;
background-color: green;
height: 310px;
width: 75px;
float: left;
margin-top: 65px;
}
.right {
border-radius: 10px;
background-color: blue;
height: 310px;
width: 50px;
float: right;
margin-top: 65px;
}
#header {
position: fixed;
height: 65px;
background-color: red;
width: 720px;
border-radius: 10px;
display: block;
}
#footer {
clear: both;
height: 65px;
width: 720px;
background-color: black;
border-radius: 10px;
}
h3 {
margin: auto;
}
With "margin:auto".
Without "margin:auto"
I am learning HTML and CSS and have tried to create a CV page, but my header won't center. I have read about this problem and the general solution seems to make the header display as a block, but it still doesn't work.
Could you please explain why this code does not center my header and offer a possible solution? Thank you in advance!
Auto margins centre the element. They don't centre the inline content of it.
The header is centred. The text "Cv" is aligned to the left of the header.
To centre that, use text-align.
Use text-align: center; The h3 tag contains text.
h3 {
text-align: center;
}
So, not an html genius here. I'm trying to place elements precisely over a fixed background image (so zoom does not alter element relation to background). Finally got it working by setting the elements to fixed 100% and specifying position offsets, only to realize a problem with this approach. The two anchors in this code snippet are in the right place on the same line, but because they are both width 100% to get them fixed relative to the background, only the second anchor is actually clickable. So, if you click the telephone number OR the email address, it just launches the mailto. Both anchors are occupying the same space, so I assume I need to solve this overlap problem and have them take only the space they occupy...but I'm pulling my hair out on the spacing. Thanks!
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>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body id="container">
<div id="content">
<a id="ContactInfo" style="top: 170px; left: -20px;" href="tel:800-555-1212">800-555-1212</a>
<div id="ContactCaret">
<img style="width:18px" src="images/double carrots.png"/>
</div>
<a id="ContactInfo" style="top: 170px; left: 280px;" href="mailto:sample#myDomain.com">sample#myDomain.com</a>
<div>
</body>
</html>
css:
#container{
position: fixed;
background: url(images/myBackground.jpg);
background-repeat:no-repeat;
background-position: center 0px;
font-family: Verdana;
width: 100%;
height: 100%;
}
#content{
position: fixed;
width: 100%;
height: 100%;
}
#ContactCaret{
position:fixed;
text-align: center;
width:100%;
top:172px;
left:92px;
}
#ContactInfo{
color: #f69f38;
text-align: center;
position:fixed;
width:100%;
font-size: 140%;
font-weight:bold;
text-decoration: none;
}
I wonder if something like THIS fiddle might help.
Convert the anchors to block.
Style them.
Position them absolute.
HTML
<div id="container">
<a id="ContactInfo" href="">800-555-1212</a>
<a id="ContactInfo2" href="">sample#myDomain.com</a>
<div>
CSS
#container {
position: relative;
background-color: white;
width: 100%;
height: 150px;
border: 1px solid black;
}
#ContactInfo {
display: block;
height: 30px;
background-color: red;
position: absolute;
top: 30px;
left: 100px;
color: white;
}
#ContactInfo2 {
display: block;
height: 30px;
background-color: blue;
position: absolute;
top: 30px;
left: 250px;
color: white;}
I need your help,
How can the text inside the white part of the box be aligned dead center (aligned both vertically and horizontally)?
See picture below:
The desired result is:
Here's the HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>Centered Div</title>
<style>
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
font-weight: bold;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#inner1 {
height: 100%;
border: 1px solid blue;
}
#inner2 {
height: 100%;
border: 1px solid green;
}
#titlebar {
cursor: pointer;
height: 23px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
}
#button {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
}
#alertText {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="titlebar"><div style="padding-left: 3px;">Information Box</div></div>
<div><input id="button" type="button" value="X"></div>
<div id="alertText">This is some sample text that will appear here</div>
</div>
</div>
</body>
</html>
Here's a Fiddle
#alertText {
position: absolute;
width: 100%;
height: 20px;
top: 50%;
margin-top: -10px;
text-align: center;
}
If it is only going to be one line of text you can do this:
#alertText {
line-height: 58px;
text-align: center;
}
If you going to have more lines of text you might need to do it some other way. Possible with position.
In a recent project, I have coded this:
<div class="table">
<div class="cell">
<img src="whatever.png">
<p>Understand align</p>
</div>
</div>
<style>
.table { display: table; width: 100%; height:100%;}
.table .cell { display: table-cell; text-align:center; vertical-align: middle;}
</style>
Hope it is usefull. You can align a text or even a image inside the "cell" div.
this is actually harder than it looks. You might find this tutorial handy: http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/
you can use padding :
fiddle: http://jsfiddle.net/parslook/PgEwF/2/
#alertText {
max-width:400px;
padding:50px;
}
You can set your div to have a display: table; and use positioning to critically center the content within:
#alertText {
display: table;
position: absolute;
top: 0;
margin: auto;
left: 0;
bottom: 0;
right: 0;
text-align: center;
width: 100%;
}
This will also gracefully support multiple lines of text without any hardcoded or magic numbers.
Here is the result:
Codepen sketch.