I'm sure one line of code will change this, but can anyone tell me why there is a gap between my divs for "About" and "Latest"? I've put margin and padding to 0 too many places already. Thanks:
http://jsfiddle.net/PfdRE/
HTML:
<body>
<div id="header" border="0">
<div class="header_logo"><img src="images/logo.png" height="100px" alt="Ashley Lincoln Designs"></div>
<div class="header_button"><span>Contact</span></div>
<div class="header_button"><span>Archive</span></div>
<div class="header_button"><span>Latest</span></div>
<div class="header_button"><span>About</span></div>
</div>
//rest of code...
CSS:
{
margin: 0;
padding: 0;
}
body {
background-color: #174C4F;
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
background-color: #F5E9BE;
color: #207178;
}
.header_logo {
height: 100px;
margin: 0 auto;
padding: 0;
color: #207178;
font-family: "Verdana", Verdana, sans-serif;
font-size: 20px;
text-align: center;
text-transform:uppercase;
text-indent: 0px;
display:inline-block;
background-color: #F5E9BE;
float: left;
position:absolute;
left:75px;
}
.header_button {
width: 125px;
margin: 0 auto;
padding: 0;
color: #207178;
font-family: "Verdana", Verdana, sans-serif;
font-size: 20px;
text-align: center;
text-transform:uppercase;
text-indent: 0px;
display:inline-block;
background-color: #F5E9BE;
float: right;
position:relative;
right:75px;
}
in your css class .about get rid of;
display:inline-block
Related
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
I would like to know how to build this example for all resolutions ( from 27 to iPhone ), I would like to put my text just above my bottom image ->
.content {
display: inline-block;
width: 100%;
max-width: 800px;
margin: 0px auto 75px
}
.imgstyle {
float: left;
max-width: 800px;
width: 100%;
}
.textcontent {
text-align: left;
display: inline-block;
margin: 0 auto;
max-width: 300px;
position: absolute;
left: 0px;
right: 0px;
z-index: 1000;
width: 100%;
}
.hr {
height: 1px;
width: 50px;
background: #282828;
}
.textstyle1 {
font-family: 'GFS Didot', serif;
font-weight: 300;
text-align: left;
margin-top: 30px;
font-size: 40px;
}
.textstyle2 {
text-align: left;
line-height: 21px;
margin-top: 20px;
}
.textstyle3 {
text-align: left;
line-height: 21px;
font-weight: 700
}
<div class="content">
<img class="imgstyle" src="http://www.facticemagazine.com/newsletter/img/test/1.jpg" />
<div class="textcontent">
<div class="hr"></div>
<h1 class="textstyle1">Keep them<br/>closed</h1>
<p style="textstyle2">Helen Molsted by Arron Dunworth
<br/>Exclusive / November 11, 2016</p>
<p class="textstyle3">Read more ></p>
</div>
</div>
you have to remove the left: 0 and add right: 0.
Updated Fiddle
Try it:-
.textstyle1{
margin:0px auto;
float:right;
}
<h1 class="textstyle1">Keep them<br/>closed</h1>
or
.textstyle1{
margin:0px auto;
float:right;
}
P{
text-align:right;
margin:60px auto;
}
<h1 class="textstyle1">Keep them<br/>closed</h1><br>
<p>Helen Molsted by Arron Dunworth
<br/>Exclusive / November 11, 2016</p>
<p>Read more</p>
I'm following this SO post here and the p element is not centering.
Basically I gave the containing div a width and height and then set text align attribute to center for the p element inside the div. No go.
What can I try next?
The containing div is id=Y1aa
I only need horizontal centering for now.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
}
.top {
color: #000000;
display: inline;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">Foo</p>
</div>
</div>
</div>
Change display:inline to display:block in your top class, or delete the display style all together.
You can remove from your .top class this: display: inline;.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
}
.top {
color: #000000;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
</div>
Alternatively, you could add text-align: center to #Y1aa if you need to keep the p as an inline element.
#Y1 {
z-index: 4000;
position: relative;
width: 100%;
height: 30px;
background: #ffffff;
opacity: .95;
}
#Y1a {
position: relative;
width: 320px;
height: 30px;
margin: 0 auto;
border-left: dotted 1px #000000;
border-right: dotted 1px #000000;
}
#Y1aa {
position: relative;
width: 320px;
height: 30px;
top: 5px;
text-align: center;
}
.top {
color: #000000;
display: inline;
font-size: 9px;
font-weight: bold;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-align: center;
line-height: 10px;
}
<div id='Y1'>
<div id='Y1a'>
<div id="Y1aa">
<p class="top">O: 832-418-9180 M: 281-923-3638 S: 281-968-0727</p>
</div>
</div>
</div>
To center a paragraph inside a div you will have to use the margin attribute in the CSS style for the paragraph
In this example i am centering the first paragraph inside the div with class 'wrap'
.wrap p:first-child {
text-align:center;
margin: 0 auto;
}
<div class="wrap">
<p>Some p tag</p>
</div>
You can visit the site I am working on here.
You can see what I am going for. I want the bottom right box to mimic the top right box in its positioning, but for some reason it refuses to fill the rest its parent div and opts to stack vertically. Even without content the background stops about half way through the box. I have it set to float left (something that shouldn't be necessary as div children should take their parent's width automatically), so I'm guessing there is something actually there but I cannot tell what. I have tried to clear and such but no luck there either. Is there a way to get that bottom right div to actually fill the parent div?
Here is my HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div>
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
And my CSS
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
display: inline-block;
}
.subtitles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
Thanks for any help or advice!
If you change your structure a little, it might help you. Instead of trying to float to divs side by side, you could just join them together kinda like I did with the HTML and css below. I added comments where I changed stuff in the css.
HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p>
<span class="subtitles">Lunch</span>
<span class="hours">Mon-Fri 11-4</span>
</p>
<p>
<span class="subtitles">Dinner</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
<p>
<span class="subtitles">Bar</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
</div>
</div><!--end hours-->
CSS:
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
/***** Removed Display:inline-block *****/
}
.subtitles {
float:left; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
float:right; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
#hours p {clear:both;} /**** Added ****/
All you need to do is to decrease the inner-div size that fits to your #hours div and assign a class to each of the inner div and float them left and right.
Example
<div id="hours">
<div class="left">
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div class="right">
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
CSS:
#hours .left
{
float: left;
}
#hours .right
{
float: right;
}
It will help for sure. Also start using browser`s consoles. They ease your life.
I take it your trying to make the Hours take up the entire box?
If so, add this code to it:
height: 100%;
width: 100%;
padding: 0px;
Use followig. Those which are commented in here, need to remove form your code.
div.container {
/*height: 460px;*/
/*padding: 10px*/
padding: 10px 10px 0px; /* bottom padding 0px */
}
div#hours div {
/*inline-block*/
}
Now add following after ending tag of #hours.
<div style="clear:both;"></div>
To make #hours div look nice, use following.
<div id="hours">
<h3 class="titles">Hours</h3>
<dl>
<dt>Lunch</dt>
<dd>Mon-Fri 11-4</dd>
<dt>Dinner</dt>
<dd>Mon-Sat 4-12</dd>
<dt>Bar</dt>
<dd>Mon-Sat 4-12</dd>
</dl>
</div><!--end hours-->
CSS Styles -
#hours dl,
#hours dt,
#hours dd {
margin: 0;
padding: 0;
}
#hours dl {
width: 100%;
float: left;
clear: both;
}
#hours dl dt {
float: left;
clear: left;
width: 45%;
}
#hours dl dd {
float: left;
}
Here is the relevant html code:
<div id="something"><img src="Images/guysonlycopy.jpg" alt="image" width="1200" height="300" /></div>
<header>
<div id="title"><img src="http://blog.flamingtext.com/blog/2013/08/29/flamingtext_com_1377801873_445376518.jpg" padding="15px" /></div>
My first div is the"something" and the second is "title" but they have a gap of about 5px between them which i don't want.
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 1200px;
margin: 100px auto;
color: #666;
}
#wrapper {
background-color: #ccc;
margin: 0;
width: 1200px;
}
/* Header
--------------------------------------------*/
header {
background-color: #170a6e;
height: 100px;
width: 1200px;
margin: 0;
padding: 0;
}
header h1 {
font-size: 4.5em;
float: left;
margin: 20px;
padding: 5px;
}
#something {
text-align: center;
padding: 0;
margin: 0;
}
#title {
float: left;
margin-left: 25px;
margin-top: 11px;
}
That is the css. I want there to be no gap between the image and the second div.
Images are inline elements by default, which means they leave descender space. To get rid of this and use them as block level elements, set display: block; on the image itself.