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>
Related
Hi i am having trouble to code html on something like on the picture below. I have tried float left right
but none of these works for the boxes on the left side and right. for the center box i used margin auto left right.
which works fine. Only problem is whenever i try with boxes on left and right side, it results in weird way and I could not figure it out how it should be done. Help appreciated.
here is the code i have tried and as you might already see i am very new to html.
<html>
<head>
<title>page4</title>
<style>
#container
{
width:1200px;
height:700px;
margin-left:auto;
margin-right:auto;
background-color:grey;
}
#image1
{
background-color: red;
height:140px;
width:300px;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image2
{
background-color: orange;
height:140px;
width:300px;
float: left;;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image3
{
background-color: yellow;
height:140px;
width:300px;
float: left;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image4
{
background-color: blue;
height:140px;
width:300px;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image5
{
background-color: green;
height:140px;
width:300px;
float:right;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image6
{
background-color: lightgreen;
height:140px;
width:300px;
float: right;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image7
{
background-color: purple;
height:140px;
width:300px;
float: left;;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image8
{
background-color: maroon;
height:140px;
width:300px;
float: left;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#footer
{
background-color: lime;
height:140px;
width:1200px;
float:right;
font-size:40px;
line-height:150px;
text-align:center;
letter-spacing:10px;
}
#content
{
background-color: pink;
height:560px;
width:600px;
font-size:40px;
line-height:290px;
text-align:center;
letter-spacing:10px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="image1"> image1 </div>
<div id="image5"> image5 </div>
<div id="content"> Content</div>
<div id="image6"> image6 </div>
<div id="image7"> image7 </div>
<div id="image8"> image8 </div>
<div id="image2"> image2 </div>
<div id="image3"> image3 </div>
<div id="image4"> image4 </div>
<div id="footer"> footer </div>
</div>
</body>
</html>
Use css left 0 and right 0 will move your button or div to left and right and even it will be responsive
Here I try to align "Table for" text with class="table" by center, but nothing happens, I think it associated with elements' positions maybe.
.table{
position:relative;
margin:5px;
width:100%;
text-align:center;
}
Here is a codepen
I'm very beginner in front-end, so do not judge strictly.
body{
background-color: grey;
}
.menu{
width:300px;
height:400px;
background-color:white;
position:relative;
}
.lupe{
float:right;
}
.arrow{
float:left;
margin-bottom:157px;
}
.ball{
position:relative;
left:10px;
margin:20px;
}
.table{
position:relative;
margin:5px;
width:100%;
text-align:center;
}
<div class='menu'>
<button class='arrow'><img src=http://iconspot.ru/files/216453.png width=20px height=5%></button>
<button class='lupe'><img src=http://s1.iconbird.com/ico/2013/9/452/w512h5121380477032search.png height=32px width=20px></button>
<div class='table'>
<img class='ball' src=http://i.imgur.com/f3axIAv.png>
<a >Table for</a>
</div>
</div>
So, I wan't the wrapper-adds to be on top of one another, but I want the wrapper-diary div to be beside the two. I'm not exactly sure why wrapper-diary won't align next to the two divs because they are all within the same wrapper. The margins denote that they should be able to align the way I want them to, but they won't for some reason.
HTML:
<div id="wrapper">
<div id="wrapper-add">
<div id="addFood3">
<!--stuff-->
</div>
</div>
<div id="wrapper-add">
<div id="addFood2">
<!--stuff-->
</div>
</div>
<div id="wrapper-diary">
<!--stuff-->
</div>
</div>
CSS:
#addFood3{
margin-top:75px;
margin-bottom:75px;
margin-right:auto;
margin-left:13%;
border-width:2px;
border-style:solid;
border-color:#ABABAB;
padding:10px 10px;
float:left;
background:#FFFFFF;
width:235px;
border-radius:3px;
}
#addFood2{
margin-top:40px;
margin-bottom:40px;
margin-right:auto;
margin-left:13%;
border-width:2px;
border-style:solid;
border-color:#ABABAB;
padding:10px 10px;
float:left;
background:#FFFFFF;
width:235px;
border-radius:3px;
}
#wrapper{
width:100%;
height:100%;
position:absolute;
overflow:auto;
}
#wrapper-add{
width:25%;
height:260px;
overflow:hidden;
}
#wrapper-diary{
width:74%;
margin-top:0px;
margin-left:25%;
position:absolute;
overflow:hidden;
padding:0%;
z-index:-3;
}
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
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 ;)