I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)
Related
Basically I want to have something like this: http://i.stack.imgur.com/GwtOm.png
I want the div containing the headline to fit to the size of the headlines. I know this can be achieved with display:inline-block; or display:table-cell; but when I add another div that I want to overlap the line, it pushes everything down.
Not sure if there’s a way to avoid that or if there's a better way to get the effect I’m going for. Any suggestions are much appreciated!
Two code examples:
body,html {margin:0;border:0;padding:0; vertical-align: baseline; line-height: 1;
}
.banner {
width:600px;
height: 400px;
background-color:grey;
}
.outer {
display:table;
margin:0 auto;
background-color:pink;
position:relative;
}
.inner {
display:table-cell;
}
.top{
border-bottom: 2px black solid;
}
.top, .bottom{
padding:20px;
text-align:justify;
}
.overlap{
position:relative;
background-color:pink;
text-align:center;
top:65px;
z-index: 100;
line-height:1;
padding:0 10px;
}
.txty{
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:16px;
}
<div class="banner">
<div class="outer">
<div class="inner">
<div class="overlap"><span class="txty">AND</span></div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="top">
<span class="txty">
Hi, this div fits to the content and it is horizontally centered, too.
</span>
</div>
<div class="bottom">
<span class="txty">
hey cool</span>
</div>
</div>
</div>
</div>
Or the other way I tried was this:
body {
background-color:grey;
margin:0;
}
.overr {
position:relative;
background-color:green;
display:inline-block;
text-align:center;
top:43px;
z-index: 100;
line-height:1;
padding:0 10px;
}
.outer {
text-align:center;
background-color:pink;
position:relative;
top:20px;
}
.inner1 {
display:inline-block;
background-color:green;
line-height:0;
}
.a{
border-bottom:4px solid black;
}
.b {
display:inline-block;
line-height:0;
}
<div class="outer">
<div class="overr">AND</div>
</div>
<div class="outer">
<div class="inner1">
<div class="a">
<p>hi, this div fits to the content and it is centered, too. Cool!</p>
</div>
<div class="b">
<p> test</p>
</div>
</div>
</div>
try position:absolute and adjust top and left
.overlap{
position:absolute;
background-color:pink;
text-align:center;
top:65px;
z-index: 100;
line-height:1;
padding:0 10px;
}
else apply float to the div and apply proper margins
Hello guys I have a small form within a div I have already centered it but the img with it can't be center properly with it its always kinda on top or in the bottom i want the h4/form/img to appear as if they are on one line here is the code:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
HTML:
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
</div>
http://jsfiddle.net/mohamedkna/djhL2z27/
Thanks in advance
You need to set vertical-align to img:
img {vertical-align: middle}
http://jsfiddle.net/djhL2z27/4/
Try like this: Demo
CSS:
form {
margin:0px;
display:inline-block;
line-height:40px;
vertical-align:middle;
}
img {
display:inline;
line-height:40px;
vertical-align:middle;
}
Add vertical-align: middle to the img and form. That should more or less do the job. The rest fine tuning u can do.
Try using align attribute:
<div class="outer">
<div class="inner" align="center">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
You have problem here:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
Change to this:
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.inner {
text-align:center
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>
Please update css. All content will be in center as you need
function useless() {
alert(hello);
}
.outer {
display:block;
max-width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
}
body {
background:#dee
}
form {
margin:0px;
display:inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
img {
display:inline-block;
vertical-align: middle;
}
h4 {
display:inline-block;
vertical-align: middle;
margin:0px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>
A different way is to use negative margin (not good for ie <8)
img {
margin-bottom:-15px;
display:inline;
}
Okay, so here's the code
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
jsfiddle
As you can see, I tried to put a hr between the two divs. This is good, except for the white space around the black line that I want. I know it's supposed to be like this, but is there a way to get just the black line?
Simple use margin: 0 to hr element:
hr{
margin: 0;
}
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
hr {
margin: 0;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
I'm creating a website which seems to work fine with the following method on a desktop computer, but when I test it on an iPad and the content extends over the footer, the footer doesn't get pushed down, but overlaps the content.
My HTML is:
<body>
<div id="wrapper">
<div id="header">
....
</div>
<div id="main">
<div id="mainuser">
<span id="left"><jdoc:include type="component" /></span>
<span id="right"><jdoc:include type="modules" name="position-7" style="xhtml" />
</span>
</div>
</div>
<div id="ft">
...
</div>
</div>
</body>
Here's the CSS:
html {
height: 100%;
padding:0;
margin:0;
}
body{
height:100%;
margin:0;
padding:0;
text-align:left;
}
#wrapper {
min-height: 100%;
position:relative;
}
#main{
width:700px;
background:transparent;
}
#mainuser {
margin-top:40px;
width:700px;
text-align:left;
background:#fff;
}
#left {
float:left;
width: 540px;
}
#right {
float:right;
width:150px;
text-align:left;
background:transparent;
color: #e10000;
margin-right:5px;
margin-top:5px;
}
#ft {
width:100%;
height:60px;
border-top:1px solid #527988;
position:absolute;
left:0;
bottom:0;
}
I also tried to insert a div between the content and the footer with clear:both, but it didn't work.
I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?
Thanks
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
#container
{
background-color:#CCC;
min-height:100%;
}
#header
{
background-color: #000;
width:100%;
float:left;
}
#navbar
{
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper
{
background-color:#000;
height: 175px;
}
#colone
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree
{
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
#footer
{
}
You need to clear your float. This is what it looks like.
http://jsfiddle.net/ZT59d/
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>
</div>
#container {
background-color:#CCC;
min-height:100%;
}
#header {
background-color: #000;
width:100%;
float:left;
}
#navbar {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
#colone {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree {
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
.clear
{
clear:both;
}
#footer {
}
If you don't mind, I'm going to give you some suggestions on how to improve your code.
First, you're using HTML5 but you're not using some of the new elements. Let's replace them.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
You're also using ids for everything. Trust me, you don't want to do that. Realistically, you should be using ids sparingly. I'm at the point now that the only time I use an id is if I need to target something with javascript.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div class="column">This is column one</div>
<div class="column">This is column two</div>
<div class="column">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
Here's what you're new css would look like.
body {
background-color:#CCC;
min-height:100%;
}
header {
background-color: #000;
width:100%;
float:left;
}
nav {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
.column {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
.clear {
clear:both;
}
I left #topper in because it's unusual. It's hard for me to tell exactly what you're trying to achieve with it.
Here's the fiddle with everything together.
Easy way to fix this is to add such CSS rules:
#footer
{
clear: both;
}
#container {
overflow: hidden;
}
DEMO
Obviously, you have some problems understanding how float property works. You should investigate it more careful. Especially I would recommend to check out clearfix hack.