I want to center the text in a div. I found this code on this site that works:
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
But when I try to add classes instead of global div or span, the code does not work anymore:
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div class="titleDiv">
<span class="titleSpan">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</div>
Any ideas why it does not work? I'm using VS2010 Pro.
Edit:
The css code is in a separate css file that is imported ok (when I change the background color in code then I can see the change in Chrome)
Edit 2:
Here is the entire markup:
Default.aspx file:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body class="titleDiv">
<form id="form1" runat="server">
<div class="titleDiv">
<span class="titleSpan">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</form>
</body>
</html>
StyleSheet.css file:
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
You need to have your CSS in a tag, e.g.
<style>
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
ext-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
ine-height: normal;
}
</style>
<div>
content
</div
I think it can be a solution for you.
Here
is the link
HTML
<body>
<div class="titleDiv">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</body>
</html>
CSS
.titleDiv {
background-color:red;
text-align:center;
margin-left:auto;
margin-right:auto;
width:500px;
height:200px;
}
.titleDiv span{
background-color:aqua;
position:relative;
top:45%
}
top:45% must be
top:TOTAL HEIGHT(which is 200px here) - SPAN HEIGHT(WHICH IS JUST A FONT SIZE AND ITS PADDING):
if the css is in the same file use <style> </style> tags:
<style type="text/css">
.titleDiv {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
.titleSpan {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
What will produce a gap from 100px:
<body>
<form id="form1" runat="server">
<div class="titleDiv"></div> <%--The gap--%>
<div class="titleDiv">
<span class="titleSpan">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</form>
Related
With the code below I am attempting to practice a simple header with flex content below it. The content is generic lorem ipsum with a background image. Unfortunately, when I run the code, the items do not "flex." they just show up in a vertical line. Any idea what I am doing wrong?
also, bonus question - when I do a background image, how do I get it to automatically shrink to fit the size of its container?
Thanks!
Brian
Tried manipulating the flex qualities and also looked up similar questions.
header {
height: 80px;
width: 1235px;
display: flex;
background-color: gray;
color: black;
vertical-align: middle;
justify-content: center;
}
header h1{
background-color: gray;
color: black;
}
.flex{
height: 1000px;
width: 1235px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.box{
width: 250px;
height: 250px;
background-image: url(./WS1.jpg);
background-repeat: no-repeat;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./GReat.css">
<title>Great</title>
</head>
<body>
<header>
<h1>This Page is Great!</h1>
</header>
<div class="Flex">
<div class ="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class ="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class ="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class ="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</body>
</html>
Your parent element has the class Flex, which is not the same as flex. Changing it to flex shows your elements flexing as expected:
header {
height: 80px;
width: 1235px;
display: flex;
background-color: gray;
color: black;
vertical-align: middle;
justify-content: center;
}
header h1 {
background-color: gray;
color: black;
}
.flex {
height: 1000px;
width: 1235px;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.box {
width: 250px;
height: 250px;
background-image: url(./WS1.jpg);
background-repeat: no-repeat;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./GReat.css">
<title>Great</title>
</head>
<body>
<header>
<h1>This Page is Great!</h1>
</header>
<div class="flex">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</body>
</html>
However, note that you have a fixed width of 1235px, which won't display well on mobile devices. I'd recommend adding in max-width: 100% to both header and .flex, so that it displays correctly for mobiles.
As for your background images, the .box class has a fixed width and height of 250px, sothe images will automatically shrink to that dimension. This can be seen in the following:
header {
height: 80px;
width: 1235px;
max-width: 100%;
display: flex;
background-color: gray;
color: black;
vertical-align: middle;
justify-content: center;
}
header h1 {
background-color: gray;
color: black;
}
.flex {
height: 1000px;
width: 1235px;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.box {
width: 250px;
height: 250px;
background-image: url("https://placehold.it/1000");
background-repeat: no-repeat;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./GReat.css">
<title>Great</title>
</head>
<body>
<header>
<h1>This Page is Great!</h1>
</header>
<div class="flex">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</body>
</html>
I'm trying to create a responsive header with a background image. When I add the off-canvass menu hamburger icon, I get a band of body background displayed at the top of the viewport.
What am I doing wrong?
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="float:left; margin:0 0 0 0; max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>
I think problem is solved, have a look
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>
I have problem with position: absolute and floats...
As you can see in fiddle, when you resize browser, text from left side goes below the image, but what I want is to go above the image.
When I remove position: absolute on .image-ipad, it works like that, but in my project I need image to stick on left side, and text on right side (normal)
Code:
HTML
<section class="case eat-login">
<div class="row">
<h3 class="stick-right">Login Screen</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px">
<div style="clear:both;"></div>
</div>
</section>
CSS
.stick-right{
float:right;
clear:both;
}
.eat-login {
position: relative;
padding: 130px 0 130px;
clear: both;
}
.eat-login p{
text-align: right;
float: right;
clear: both;
width: 45%;
font-size: 15px;
font-family: "Proxima Nova";
color:#9e9d9d;
line-height: 25px;
}
img.image-ipad {
left:0px;
top:40px;
}
JSFiddle: http://jsfiddle.net/jt9jk2g0/6/
Thanks!
You could do it by using css #media queries for small screen size:
JSFiddle - DEMO
HTML:
<section class="case eat-login">
<div class="row">
<img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px">
<h3 class="stick-right">Login Screen</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div style="clear:both;"></div>
</div>
</section>
CSS:
.stick-right {
float:right;
clear:both;
}
.eat-login {
position: relative;
padding: 130px 0 130px;
clear: both;
}
img {
position: absolute;
}
.eat-login p {
text-align: right;
float: right;
clear: both;
width: 45%;
font-size: 15px;
font-family:"Proxima Nova";
color:#9e9d9d;
line-height: 25px;
}
#media (max-width: 500px) {
h3 {
margin-top:300px;
}
}
I know this is a noob question, but I just can't figure this out! I'm laying out a page for our intranet and all I need to do is position some divs side by side. Each container is a different item, but all containers have the same structure, a header, some descriptive text, and an image. I will be adding items as they are given to me. This is basically just a page i'm creating for employees to sell items. Here is my css and an image of what I'm trying to achieve. Please let me know if this doesn't make sense, but as smart as you guys have proven to be in the past, i'm sure you get the idea.
.wrapper {
width: 1260px;
height: 900px;
margin: 0px auto;
position: relative;
}
.container {
width: 400px;
height: 400px;
margin: 10px;
position: absolute;
}
.itemText {
width: 350px;
height: 190px;
padding: 0px;
position: absolute;
top: 25px;
left: 25px;
}
.itemHead {
padding: 0px;
margin: 0px;
}
.itemDesc {
padding: 10px;
margin: 0px;
}
.itemThumb {
width: 350px;
height: 150px;
position: absolute;
bottom: 25px;
left: 25px;
}
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
</div>
</body>
</html>
Don't position your containers absolutely.
.container {
width: 400px;
height: 400px;
margin: 10px;
position: relative;
float:left;
}
At the end of the last container div, you'll need a div to clear: left;
<div style="clear:left;"></div>
Now when you add more div's, they will auto float, and the container will get cleared.
Absolute positioning is in that case really useless.
try this:
.container {
position: relative;
float: left;
width: 400px;
height: 400px;
margin: 10px;
}
Your divs have the same height, so using float is pretty convenient. By giving your .container the attribute position: relative .itemThumb is positioned correctly.
This should work
I don't know if I understand exactly
but one way to get the containers to line up is to set the .container class to
.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
}
Adding the display: inline-block;
And removing the position:absolute.
Setting your width for each container to around 30% of the wrapper will ensure that three containers get lined up before they go to a new line.
You will need to take off all the position: settings IN your css file so that all the information stays contained within the div.
e.g.
.wrapper {
width: 1260px;
height: 900px;
margin: 0px auto;
position: relative;
}
.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
border: 1px solid black;
}
.itemText {
width: 350px;
height: 190px;
padding: 0px;
top: 25px;
left: 25px;
}
.itemHead {
padding: 0px;
margin: 0px;
}
.itemDesc {
padding: 10px;
margin: 0px;
}
.itemThumb {
width: 350px;
height: 150px;
bottom: 25px;
left: 25px;
}
I want to position "rightBottomPart" to the bottom of "rightPart" and I want "rightPart to be as high as "leftPart". The problem is that I don't know the height of the content in "leftPart" and therefore I can't set the height of "text". (Height in "text" would solve it)
Right now it looks like this:
and I want it to look like this:
My code:
<!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>
</head>
<body style="margin: 0px 0px 0px 0px;">
<div id="headers" style="background-color: Olive; width: 300px; height: 50px;"></div>
<div id="text" style="background-color: Navy; position: relative; width: 300px;">
<div id="leftPart" style="background-color: Gray; width: 200px; float: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="rightPart" style="background-color: Red; float: right;">
<div id="rightTopPart" style="background-color: Lime; position: absolute; right: 0px; top: 0px;">top</div>
<div id="rightBottomPart" style="background-color: Yellow; position: absolute; right: 0px; bottom: 0px;">bottom</div>
</div>
</div>
</body>
</html>
It looks right in IE7, but not in the rest of the browsers I've tested. If I remove the DOCTYPE-tag it also looks good in IE8, but still not in Google Chrome.
What am I missing?
Thanks
Carl
To keep floats and position under control, you need to keep two things in mind: the position is absolute according to its parent element and usually needs dimensions, and floated objects do not have dimensions by default.
Since your test represents a simple two-column model, have a look at this nice overview here, it might clarify things up a little bit: equal height columns with css
So, the trick here is to give #text a float and pos:rel and then the #right*Part will know where they are positioned.
Have a look here:
<!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>
body { margin: 0; }
#headers { background: Olive; width: 300px; height: 50px; }
#text { background: Navy; position: relative; width: 300px; display: block; float:left; }
#leftPart { background: Gray; width: 200px; float: left; display: inline-block; }
#rightPart { background: Red; }
#rightTopPart { background: Lime; position: absolute; right: 0; top: 0; }
#rightBottomPart { background: Yellow; position: absolute; right: 0; bottom: 0; }
</style>
</head>
<body>
<div id="headers"></div>
<div id="text">
<div id="leftPart">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="rightPart">
<div id="rightTopPart">top</div>
<div id="rightBottomPart">bottom</div>
</div>
</div>
</body>
</html>
Kind regards, mtness