Can't width:100% and text-align:center - html

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>

Related

HTML boxes on left and right sides while having box on center

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

Why won't my div align vertically?

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;
}

Margin: auto doesn't work and other questions have not helped fix it

I'm having trouble getting columnContainer to center inside sectionTwo. The code is below. No matter what I do, it seems to be left aligned.
HTML:
<section class="sectionTwo">
<div class="columnContainer">
<div class="columnExplanation">
<img src="Images/imagehere.png" style="width:150px;height:auto;margin-left:30%;margin-bottom:10px;"/>
<p>text here.</p>
</div>
</div>
</section>
CSS:
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
width:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
Thanks for your help!

If you are trying to center 'ColumnContainer' it already centered it is because you have them both set to 100% width;
change it to this to see it actually working:
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
background-color: red;
width:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
text-align: center;
}

I don't think you should use margin-left 30% on your image if you want to center it. Indeed, as an inline element, you can use text-align: center on your parent div to do the trick :
HTML:
<section class="sectionTwo">
<div class="columnContainer">
<div class="columnExplanation">
<img src="Images/imagehere.png" style="width:150px;height:auto;margin-bottom:10px;"/>
<p>text here.</p>
</div>
</div>
</section>
CSS
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
width:100%;
position:relative;
display:block;
margin-top:20px;
text-align: center;
}

this one will help you:
section {position:relative;}
section #your_id {
position:absolute;
top:50%;
margin-top:-100px; */half of your height*/
right:50%;
margin-right:-100px; */half of your width*/
}

How to prevent <hr> from creating a space between two divs?

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>

html css style not working

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 ;)