You can visit the site I am trying to work on here.
I am trying to get basically the layout as in the top right box in the bottom right box, but for some reason I cannot get it to float to the right. Is there something I am missing here? It's driving me nuts because my code works in the upper box but not in the lower one.
Here's the 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>
</div>
</div><!--end hours-->
</div><!--end container-->
And the 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-right: -11px;
margin-top: 11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10p;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 150px;
display: inline-block;
}
Thanks for any help! It's probably something simple and I just need a fresh pair of eyes.
you seem to have a typo,
under the style rule for
div#hours
you have
padding: 11px 11px 10px 10p;
your missing an 'x' at the end. Which means the padding rule is not being applied
Now this solves the alignment, but the height might not be right now, but I'm sure that should be straight forward
Related
After I kept trying I made some tweaks that would allow me to have the div on the same line with h3, but it's not centered. I simply want to have the div on the same line, next to the h3, with vertically centered h3 text (or the div, it doesn't matter as long as text appears .
I guess that position: absolute; is a problem, but if I remove it, the circle around the number won't be a circle anymore (and I need to keep it a circle)
As it is now, the circle will be positioned on the same line, but it vertically aligns top, if the heading text has enough space on the page (one line)
or bottom, if the heading text goes on two lines (due to being too long)
And also add 10px between the circle and the text, horizontally.
I use this html:
<h3> <div class="numberCircle">
<div class="content">24</div> </div>Smallest Personal Computer - Micro Mote </h3>
and this css:
.numberCircle {
border-radius: 50%;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
width: 50px;
padding: 8px;
font-size: 32px;
line-height: 1em;
border: 2px solid #666;
position: relative;
}
.numberCircle:before{
content:"";
display:block;
margin-top:100%;
}
.numberCircle .content {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
for h3:
h3 {
line-height: 1.17391em;
color: #242d36;
font-family: "PT Serif", Georgia, Times, serif;
font-size: 23px;
margin: 27px 0;
display: flex;
align-items: center;
justify-content: center;
vertical-align:middle;
}
You can easily achieve it changing a bit your HTML and moving the flexbox to the wrapper.
.numberCircle {
border-radius: 50%;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
width: 50px;
padding: 8px;
font-size: 32px;
line-height: 1em;
border: 2px solid #666;
position: relative;
}
.numberCircle:before{
content:"";
display:block;
margin-top:100%;
}
.numberCircle .content {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
h3 {
line-height: 1.17391em;
color: #242d36;
font-family: "PT Serif", Georgia, Times, serif;
font-size: 23px;
margin: 27px 0;
vertical-align:middle;
}
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<div class="numberCircle">
<div class="content">24</div>
</div>
<h3>Smallest Personal Computer - Micro Mote </h3>
</div>
You can also make this easy for yourself by rather using a table.
Check this out:
CSS:
.MyTable {
width: 300px;
}
.MyTable tr td {
vertical-align: middle;
}
.circle {
background: red;
width: 40px;
height: 40px;
text-align: center;
position: relative;
display: inline-block;
border-radius: 100%;
border: 1px solid black;
padding: 10px;
font-size: 32px;
}
.text {
background: green;
font-family: "PT Serif", Georgia, Times, serif;
font-size: 23px;
}
HTML:
<table class="MyTable">
<tr>
<td>
<div class="circle">
24
</div>
</td>
<td class="text">
Smallest Personal Computer - Micro Mote
</td>
</tr>
</table>
With this, you don't have to worry about the line-heigt, and all those "itty gritty" stuff. You will be able to change your font-size and still have your text centered perfectly.
I am coding a button with html5 and css3. Here are how it looks in different sizes:
You can see the icons are not in the middle. I know why it happens. But how can I set the icons in middle? Here is my code:
<i class="icon">a</i><span>start</span>
CSS:
.blue-pill {
display: block;
text-decoration: none;
width: 135px;
height: 50px;
margin-bottom: 15px;
position: relative;
background-color: #002032;
border: none;
color: #FFF;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
padding: 0;
border-radius: 50px;
cursor: pointer;
z-index: 2;
text-align: center;
line-height: 50px;
-webkit-box-shadow: 0px 5px 0px #1488ae;
-moz-box-shadow: 0px 5px 0px #1488ae;
box-shadow: 0px 5px 0px #1488ae;
}
.blue-pill .icon {
display: inline-block;
margin: 0 5px;
color: #e57125;
font-size: 20px;
}
.blue-pill span {
display: inline-block;
}
.blue-pill.centered {
margin-left: auto;
margin-right: auto;
}
.blue-pill.inline {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
I am using icon fonts for icons. Here is what I want:
add vertical-align:middle to .blue-pill .icon and .blue-pill span
Example
I'm sort of a noob to developing websites, but hope to learn more. The problem I'm having is that my main page content goes under my footer if the page holds more and more content. ( https://i.imgur.com/LeqVBwl.png )
Either I'm doing something wrong, or I'm just missing something but, here's how I did it:
How could I fix this? Do I have to add/remove something?
The "position: absolute" is so it says at the bottom
CSS:
body {
margin: 0 0 65px;
background: #000000 url(../images/bg.png);
padding-bottom: 65px;
}
#menu {
height: 50px;
padding-left: auto;
padding-right: auto;
background: #ccc no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
float: left;
padding: 18px;
margin-right: 1px;
background: lightgray no-repeat;
text-decoration: none;
font-size: 10px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
background: darkgray;
}
.main {
width: 1300px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border: 1px black solid;
}
.content {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-right: auto;
border: 1px solid #ccc;
width: 800px;
float: left;
background: white;
border-radius: 2px;
}
.content h2 {
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #ccc;
text-align: center;
}
.sidebar {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-left: 30px;
margin-right: auto;
border: 1px solid #696969;
width: 300px;
float: right;
background: #EDEDED;
border-radius: 2px;
}
.sidebar h2 {
font-size: 15px;
font-weight: bold;
border-bottom: 2px solid #ccc;
text-align: center;
}
#footer {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: #ccc no-repeat left;
border-top: 3px solid;
left: 0;
bottom: 0;
height: 65px;
width: 100%;
}
#footer .footer-content {
font-weight: bold;
color: #262626;
font-size: 14;
}
#footer .footer-content a {
color: #545454;
text-decoration: none;
font-size: 14px;
}
#footer .footer-content a:hover {
color: #6E6E6E;
text-decoration: none;
font-size: 14;
}
HTML:
<div id="footer">
<div class="footer-content">
<center>
Home | Forums | Contact | Signup |Login
</center>
</div>
</div>
Fixed
I seemed to have fixed my problem. I just added:
<div style="clear: both;"> </div>
It's because you're footer has position: absolute; applied, this means it jumps out of the normal flow of the page. To fix it, add a padding equal to the height of the footer to the bottom of the page.
body {
padding-bottom: 65px;
}
I'm making a webpage with a fixed footer. If there is a lot of content, there must be a scroll bar. If there is only one line of input in the content-part, there is no need to scroll. The way the page is made now, gives me a scroll bar all the time! It scrolls just as far so that the header disappears from the screen. --> My header is 150px high and I can scroll exactly 150px. But I don't want this. What is wrong with my html or CSS?
This is the html:
<body>
<div id="header">
<h1>The <span>ultimate</span><br />DVD collection</h1>
</div>
<div id="main_wrapper">
<div id="main">
<div id="choose">#abcdefghijklmnopqrstuvwxyz</div>
<div id="content">Main content comes here.</div>
</div>
</div>
<div id="footer">
<p>My Name <span>admin log-in</span>
</p>
</div>
Here's my CSS:
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 150px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
height: 100%;
min-height: 100%;
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 40px;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
You can also see my code in this jsFiddle.
What am I doing wrong? (look at the scroll bar in the picture)
Thanks in advance!
Remove height:100% on the main-wrapper. The height of 100% means 100% of the available space inside the parent (the header and the main-wrapper has the same parent). But the main-wrapper is not aware of the headers height. So the result will be 100% + 150px.
I have made a few adjustment in style.
I have given percentage height for your container(you can adjust them as per you need) and scroll property to div.
<style>
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 15%px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
/*height: 100%;*/
/*min-height: 100%;*/
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 70%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
overflow:scroll;
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 15%;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
</style>
I worked around it using this explanation: http://dorayme.netweaver.com.au/ciaran.html
My wrapper now has a position:absolute with top: and bottom: equal to the height of header and footer (+ height of borders)
#main_wrapper{
position: absolute;
top: 170px; /* header + bordertop + borderbottom */
bottom: 50px; /* footer + bordertop */
left: 0;
right: 0;
background-image: url('path/to/img.jpg');
background-repeat: no-repeat;
background-position: 50% 40%;
background-color: #5a646d;
}
Thx to Johan Sundén for pushing me into the right direction!!
I succeeded in centering my divs on my webpage, but I can't figure out how to align seperate div's under each other?(when still centered).
It's a blog, so when I add something, the div beneath the "blog"-div should move automatically. (margin is thus not a solution)
Greetings
.blog {
background: transparent;
height: 1200;
border-radius: 5px;
border: solid -4px #a19a9a;
width: 700px;
left: 50%;
margin-left: -350px;
position: absolute;
margin-top: -30px;
padding-bottom: 50px;
}
same code for the other div.
The "container":
#content{
width: 750px;
margin-top: 65px;
text-align: left;
height: 9000px;
overflow-x: hidden;
}
For all the code: http://www.janwillemlibeer.be/verticaal
well there is tens of methods to do such thing.. but not all might work in your example.. Its much easier to find out which one if you provide some code.
I would use such solution, group up all of the blog divs in a container.
part of index.html
<div class="container">
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
</div>
styles.css
.container {
width: 200px;
margin:0 auto;
}
.blogdiv {
width: 200px;
min-height: 20px;
clear: both;
border: 1px solid #ddd;
margin: 3px;
background-color: #f6f6f6;
}
go here for the example ---> http://jsfiddle.net/2WJm7/
but as I have said... there is a lot of methods to achieve this result but not all might work for you until you show us the code
EDIT:
ok so first of all You should not put some crazy height values... if you put min height: 20px; it will auto resize your div if the content is too big...
if you want to center the content just use margin:0 auto;
remove position: absolute; so it lets the second blog div to go under.
Overflow-x is pointless in this example as well. here is code which i changed:
css
.blog {
background: transparent;
border-radius: 5px;
border: 4px solid #a19a9a;
width: 700px;
margin: 0 auto;
margin-top: 30px;
clear:both;
}
#content{
width: 750px;
margin-top: 65px;
text-align: left;
min-height: 20px;
}
html
<div class="content">
<div class="blog">asudhasbdjsabdaushdusab saudhsab dsuadh sauhd iusahd bsabd sadjsa ub d</div>
<div class="blog">sadsad sasdas frw</div>
<div class="blog">suadguiasgduiasb gasyudh shavduis auydb iuasbvd unqwhbv ub ihbiusbvduib bni busib ub iubyu buih bviun buyvb ou vuqiw</div>
<div class="blog">yauhdiuasbduasndbasubdas</div>
<div class="blog">test</div>
</div>
edit:
Your CSS fixed
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, em, font, img, small, strong, ol, ul, li, fieldset, form, label, legend {
border: 0 none;
margin: 0;
outline: 0 none;
padding: 0;
}
#font-face {
font-family: "Dincond";
font-style: normal;
font-weight: normal;
src: url("fonts/dincond-bold-webfont.eot?") format("eot"), url("fonts/dincond-bold-webfont.woff") format("woff"), url("fonts/dincond-bold-webfont.ttf") format("truetype"), url("fonts/dincond-bold-webfont.svg#webfontabKpQmB0") format("svg");
}
#font-face {
}
#content {
float: none;
padding-top: 65px;
text-align: left;
width: 750px;
margin: 0 auto;
}
body {
background: url("images/bkg.jpg") repeat fixed center center transparent;
font-family: Georgia,"Lucida Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
#blog p {
color: black;
font-family: Lucida Grande;
font-size: 13px;
line-height: 130%;
padding-left: 0;
}
#blog a {
color: #1277A6;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
#blog a:hover {
text-decoration: underline;
}
h2 {
color: #1277A6;
font-family: Dincond;
font-size: 35px;
font-weight: 400;
padding: 0 0 10px;
}
h3 {
color: #990000;
font-family: Dincond;
font-size: 23px;
font-weight: 400;
}
#menu p {
color: #4D4B4B;
font-family: Dincond;
font-size: 31px;
}
.blog, .contact {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 white;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
clear: both;
display: block;
padding-bottom: 50px;
width: 700px;
margin: 0 auto;
}
#begin {
border-bottom: 2px dashed #A19A9A;
margin-left: 50px;
margin-right: 50px;
padding-bottom: 20px;
padding-top: 10px;
width: auto;
}