I have this HTML:
<div style="position: relative;">
<img width="100%" src="images/some.jpg">
<div class="header">
<h1>my header</h1>
Some more<br>text
</div>
</div>
This is the CSS:
.header {
color: #000000;
font-size: 52px;
left: 70%;
position: absolute;
text-align: right;
top: 0;
}
h1 {
font-size: 52px;
margin-bottom: 0;
}
Now, when I resize the page, there is 1 problem:
At some point, the text is not above the image to 100% any longer, but why?
Sooo you want it like this?
HTML
<div style="position: relative;">
<div class="header">
<h1>my header</h1>
Some more<br>text
<img width="100%" src="/image/some-image.jpg">
</div>
</div>
CSS
.header {
color: #000000;
font-size: 52px;
left: 70%;
width: 100%;
position: absolute;
text-align: right;
top: 0;
}
h1 {
font-size: 52px;
margin-bottom: 0;
}
DEMO: http://jsfiddle.net/cT7Sy/
Related
First I want to say I am quite a newbie with CSS.
Without changing a lot of my code I would like to have text over an image.
My current code is:
#container {
width: 1010px;
margin-left: auto;
margin-right: auto;
}
#left-box {
width: 681px;
float: left;
margin-right: 29px;
}
#data {
width: 206px;
height: 140px;
background-color: #fff;
float: left;
margin-right: 10px;
margin-left: 11px;
margin-bottom: 20px;
}
<div id="container">
<div id="left-box">
<div id="data">
<img src="img/img1.jpg" />
<<<< here I want put some text, which should be over the image >>>>
<h2 class="h2-data">Some text</h2>
<p class="stats">text</p>
</div>
</div>
</div>
I tried adding some code which I found from Google, but the text is appearing at the top of the website when I use absolute as position. And with relative the text is under the image, but not OVER the image.
Anyone who can help me?
Use position: relative for the block enclosing the image and position: absolute for the text after assigning a class to it.
#container {
width: 1010px;
margin-left: auto;
margin-right: auto;
}
#left-box {
width: 681px;
float: left;
margin-right: 29px;
}
#data {
width: 206px;
height: 140px;
background-color: #fff;
float: left;
margin-right: 10px;
margin-left: 11px;
margin-bottom: 20px;
position: relative;
}
.text {
top: 0;
left: 100;
position: absolute;
}
<div id="container">
<div id="left-box">
<div id="data">
<img src="http://placehold.it/200x140"></img>
<div class="text">
<<<< here I want put some text, which should be over the image>>>></div>
<h2 class="h2-data">Some text</h2>
<p class="stats">text</p>
</div>
</div>
</div>
maybe so
#container {
width: 1010px;
margin-left: auto;
margin-right: auto;
}
#left-box {
width: 681px;
float: left;
margin-right: 29px;
}
#data {
width: 206px;
height: 140px;
background-color: #fff;
float: left;
margin-right: 10px;
margin-left: 11px;
margin-bottom: 20px;
position: relative;
}
#data img{
position: absolute; top: 0; left: 0;
}
#data .text{
position: relative;
}
<div id="container">
<div id="left-box">
<div id="data">
<img src="http://placehold.it/200x140" />
<div class="text">
<<<< here I want put some text, which should be over the image >>>>
<h2 class="h2-data">Some text</h2>
<p class="stats">text</p>
</div>
</div>
</div>
</div>
I'm facing with a strange problem I can't pinpoint. I have a 3 column layout where the first 2 columns have position-fixed, so that only the third column scrolls.
The first element of each column have a margin-top of 20px (for the first and third column it's the H1 element, for the second column it's the div). For some reason, the third column does not line up with the first 2.
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">
Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
I have a simple version of it at jsfiddle, demonstrating the problem.
http://jsfiddle.net/59ez7zmy/
I can only assume that the position-fixed has got something to do with it, but I can't seem to figure it out.
When I use the Chrome developer toolbar, there is a (approx) 20px gap (although not defined by any margin) between the top of the page and the divs, and the elements inside the position: fixed columns have a 20px margin relative to the container2 div (as expected). The third column however, has a 20px margin to the top of the screen rather than the .container2 div.
Anyone knows what I'm missing here?
Specify top: 0 for .sidebar and .menu (fiddle).
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
top: 0;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
top: 0;
}
See the documentation for top
One solution is to add position: fixed on .content class:
h1 {
font-size: 1em;
margin-top: 20px;
}
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
}
.content {
margin-left: 370px;
width: 150px;
position: fixed;
}
.mediablock {
margin-top: 20px;
}
.wrapper {
position: relative;
text-align: center;
}
.container2 {
width: 550;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">
Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
Also if you don't want to use position: fixed you can use display: inline-block also in .content class:
h1 {
font-size: 1em;
margin-top: 20px;
}
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
}
.content {
width: 150px;
position: relative;
display: inline-block;
}
.mediablock {
margin-top: 20px;
}
.wrapper {
position: relative;
text-align: center;
}
.container2 {
width: 550;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
Also you have some errors in your css i fix them.
I need some advice on this issue i'm having. In the jsfiddle below, I'm trying to create a responsive grid layout. The issue with what i have is, i would like the text to be in the middle of each individual grid. I've tried bumping it using margin-top but instead of the images stacking onto each other while resizing, the images are overlapping each other. The end result desired will be to have the text aligned center onto the image and have no gaps on all sides of the grid when resizing according to various screen resolution.
Link: http://jsfiddle.net/kelvinchow/VaDS9/
<style type="text/css">
#wrapper {
display: block;
width: 100%;
height: auto;
background: green;
}
.box {
display: inline-block;
float: left;
width: 50%;
height: auto;
vertical-align: baseline;
background: red;
}
.box-img img {
width: 100% !important;
height: auto;
}
.box-title {
display: block;
background: grey;
height: 25px;
font-size: 20px;
font-family: helvetica, san serif;
color: blue;
text-align: center;
margin-top: -100px;
}
</style>
<div id="wrapper">
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
</div>
You'll get this:
Fiddle here: http://jsbin.com/osazav/1.
With this markup:
<body>
<div id="tl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="tr" class="box">
<p class="box-title">howdy</p>
</div>
<div id="bl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="br" class="box">
<p class="box-title">howdy</p>
</div>
</body>
And this css:
div.box {
background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
position: absolute;
height: 50%;
width: 50%;
background-size: cover;
background-position: center;
}
div.box p.box-title {
color: red;
background-color: black;
padding: 5px;
position: absolute;
margin: -10px -20px;
top: 50%;
left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }
I am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.
See image
Actually, many ways.
One of them:
html
<div class="wrapper">
<div class="line"></div>
<div class="wordwrapper">
<div class="word">or</div>
</div>
</div>
css
.wrapper {
position: relative;
width: 250px;
height: 300px;
border: 1px dashed #ccc;
margin: 10px;
}
.line {
position: absolute;
left: 49%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
z-index: 1;
}
.wordwrapper {
text-align: center;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -12px;
z-index: 2;
}
.word {
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
font: bold 12px arial,sans-serif;
background: #fff;
}
See example: http://jsfiddle.net/zmBrR/22/
Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.
http://jsfiddle.net/mstauffer/uyTB7/
HTML:
<div class="container">
<div class="side">Left side</div>
<div class="or">
<div class="or-line"></div>
<div class="or-label">Or</div>
</div>
<div class="side">Right side</div>
</div>
CSS:
.container {
padding: 1em;
}
.side, .or {
float: left;
height: 6em;
text-align: center;
}
.side {
width: 40%;
}
.or {
position: relative;
width: 20%;
}
.or-line {
float: left;
width: 50%;
border-right: 1px solid #aaa;
height: 6em;
}
.or-label {
background: #fff;
color: #aaa;
height: 1em;
left: 50%;
margin-left: -1.25em;
margin-top: 2em;
padding: .5em;
position: absolute;
text-transform: uppercase;
width: 1em;
}
Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.
this is the solution with flex box:
https://jsfiddle.net/1z0runv9/1/
.wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}
.or-separator {
display: flex;
flex-direction: column;
align-items: center;
color: #d3d7da;
}
.vertical-line {
border-left: 1px solid #d3d7da;
flex-grow: 1;
width: 1px;
}
<div class="wrapper">
<div class="or-separator">
<div class="vertical-line"></div>
<div>Or</div>
<div class="vertical-line"></div>
</div>
</div>
Put a <div> around the markup and use CSS like this:-
<div class="verticalLine">
some other content
</div>
in cSS:-
.verticalLine {
border-left:thick solid #ff0000;
}
OR you can try this:-
<style type="text/css">
#your_col {
border-left: 1px solid black;
}
</style>
<div id="your_col">
Your content here
</div>
You can use jquery to do the same thing. Import jquery cdn in your HTML document
select the required item and write a javascript code for that.
consider this example
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
<style type="text/css">
.completed{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>
</div>
<script type="text/javascript" >
`enter code here`
$("li").click(function () {
$(this).css("color","gray");
$(this).css("text-decoration","line-through");
});
or
$("li").click(function () {
$(this).toggleClass("completed");
});
</script>
</body>
</html>
In this example line is passed over the list(li) elements.
Regardless of the question asked, i am here going for a rather simple approach in both directions.
.demo-body{
height: 400px;
}
.line-wrapper{
background: black;
width: 2px;
height: 100%;
position: relative;
}
.line-wrapper .word{
position: absolute;
background: white;
top: 50%;
transform: translate(52%,-50%);
right: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.line-wrapper .word.vertical{
writing-mode: tb-rl;
}
<div class="demo-body">
<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
<div class="word">OR</div>
</div>
<br>
<!-- VERTICAL TEXT -->
<div class="line-wrapper">
<div class="word vertical">OR</div>
</div>
</div>
you can archive it by using flexbox for example
body {
position: relative;
height: 100vh;
}
.vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-10px);
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
color: #999;
}
.vertical .line {
width: 1px;
flex: 1;
background: #999;
}
<div class="vertical">
<div class="line"></div>
<div class="text">OR</div>
<div class="line"></div>
</div>
To make the issue easier to analyze I have created this jsFiddle:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; padding-top: 30px; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; padding-top: 30px; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; padding-top: 30px; }
#footerContainer { position: absolute; bottom: 0; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
With the markup of top, middle, and bottom sections, problem is:
1- As you can see the footer colored in black is not really on the bottom of the page despite having position:absolute and bottom:0px on the footer div
2- More importantly, leftSection, middleSection and rightSection DIVs overlap with the header and footer DIVs, in fact, in this fiddle the only way to see the text displayed of the 3 middle sections is to have padding placed to avoid having it displayed underneath the header DIV.
I have tried placing top and bottom values of 30px on middleContainer to fix the overlap issue but this does not solve the problem, all I want is to keep headerContainer on top and footerContainer on the bottom while all the 3 middle sections adjust to 100% height. leftSection and rightSection have fixed width, but middleSection has flexible width and height.
http://jsfiddle.net/grc4/XTQuT/2/ does what I wanted exactly without specifying solid height values.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0;
height:100%;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px 0;
}
#leftSection {
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
}
#middleSection {
position: absolute;
background-color: yellow;
left: 175px;
right: 175px;
top: 0;
bottom: 0;
color: black;
}
#rightSection {
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
The "padding-top: 30px;" on your 3 inner elements is making them 30px taller than the height of the actual body, creating your problem.
Remove the top padding from those 3 elements, then make your header and footer relatively positioned, rather than absolute, and you should be set.
Like this: http://jsfiddle.net/BPJxD/28/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
Your problem was that you were using needless absolute positioning in headercontainer and footercontainer, solution
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
CSS:
body { margin:0; }
#mainContainer
{
position: absolute;
right: 4%; left: 4%;
height: 100%;
}
#headerContainer
{
width: 100%;
z-index: 10;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer { height: 100%; }
#leftSection
{
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection
{
position: absolute;
height: 100%;
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection
{
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer
{
position: relative;
bottom: 0; width: 100%;
height: 30px;
background: #323232;
color: white;
}
Reviewing your whole Fiddle I noticed that you are using absolute positioning on every div. This is plane wrong.
You should only absolute positioning when:
You need a container that is free of the document's usual formatting. Such as a popup or a floating box.
You need to use a div inside a parent div with fixed positioning, but this will only work if parent positioning is set to relative.
You can remove all 3 of
padding-top: 30px;
like
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
and change your html like this
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top:30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top:30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top:30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
I hope this can be helpful.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: relative; right: 4%; left: 4%; height: 100%; width:1000px; }
#headerContainer { width: 1000px; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; width:1000px; position:relative; display: table-cell;}
#leftSection { float: left; width:25%; background: #71ABD1; overflow: auto; color: black; padding-top: 30px; height: 100%;}
#middleSection { float: left; height:100%; width:50%; background-color: yellow; color: black; padding-top: 30px; }
#rightSection { float:left; height:100%; width: 25%; background: red; color: black; padding-top: 30px; }
#footerContainer { bottom: 0; width:1000px; height: 30px; background: #323232; color: white; float:left;}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer"> headerContainer </div>
<div id="middleContainer" >
<div id="leftSection"> leftSection </div>
<div id="middleSection"> middleSection </div>
<div id="rightSection"> rightSection
rightSection rightSection rightSection rightSection rightSection rightSection rightSection </div>
</div>
<div id="footerContainer" > footerContainer </div>
</div>
</body>
</html>