as you can see the border right is all the way at the right of the header I want to move it closer to the middle text.
[1]: https://i.stack.imgur.com/HRYwR.png
#header {
font-family: "NotoNashkArabic", "ProximaNova-regular", "Helvetica Neue", "Helvetica", Roboto, Arial, sans-serif;
margin: 0;
background-color: #2E7061;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
}
#title {
color: white;
text-align: center;
padding:10px 5px 20px 5px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
}
html
<body>
<div id="header">
<img src="Capture1.png"/>
<p id="title">THE Text</p>
</div>
</body>
Could you add this to your css #title
display: inline-block;
which will be,
#title {
display: inline-block;
color: white;
text-align: center;
padding:10px 5px 20px 5px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
I hope it solves your problem
The code you provided is not enough to reproduce what you show in the image. But I'll assume your image is floated left for now.
#header {
font-family: "NotoNashkArabic", "ProximaNova-regular", "Helvetica Neue", "Helvetica", Roboto, Arial, sans-serif;
margin: 0;
background-color: #2E7061;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
}
#header img{
float: left;
}
#title {
color: white;
text-align: right;
padding-right: 20px;
margin-right: 20px;
margin: -.1px;
font-size: 1.7em;
border-right: 1px solid white;
width: 50%;
margin-left: 200px;
height: 100%;
line-height:80px;
}
<body>
<div id="header">
<img src="http://placehold.it/200x80.png">
<p id="title">THE Text</p>
</div>
</body>
What I did here was:
Set width: 50% on your #title. (Arbitrary value)
I set the left margin to the width of your image (I guessed at 200px.) The reason is because the picture overlaps the width of the <p>-tag when the image is floated. I consider it more concise to have the values without overlap.
I aligned the text right to get it close to the border. Use 'padding-right' to control the space between text and border.
I removed vertical padding and set the line-height to the height of the header/image to get the text vertically centered and the border to reach from top to bottom of the header.
Other things to note:
margin-right: 20px; // This has no meaning...
margin: -.1px; // ...since it gets overridden by this.
Related
I apologize in beforehand if this is a duplicate but I can't seem to find an answer.
I made something that resembles a progress bar. It's a div with p elements inside. However I can't seem to center the p elements vertically.
All i did now was give the parent div some padding and logically the text should be in the middle but it seems like the font is counting the height differently. And so the solution to change the line-height won't work. If I change the font to Verdana the text is aligned but that is not a preferred solution.
Snippet:
div {
width: 90%;
background-color: green;
text-align: left;
padding: 1.2%;
border-radius: 5px;
height: 20px;
font-family: 'Hind Guntur', sans-serif;
}
p {
font-size: 90%;
display: inline;
margin: 0;
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet">
<div>
<p>1</p>
</div>
This should be what you are looking for. Your problem was that you had a fixed height of 20px on the div. If you change that value to 28px, your text might vertical-align.
div {
width: 90%;
background-color: green;
text-align: left;
padding: 1.2%;
border-radius: 5px;
height: 28px;
font-family: 'Hind Guntur', sans-serif;
}
p {
font-size: 90%;
display: inline;
margin: 0;
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet">
<div>
<p>1</p>
</div>
check this
div {
width: 90%;
background-color: green;
text-align: left;
padding: 1.2%;
border-radius: 5px;
height: 20px;
font-family: 'Hind Guntur', sans-serif;
}
p {
font-size: 90%;
display: inline;
margin: 0;
color: white;
vertical-align: middle;
}
<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet">
<div>
<p>1</p>
</div>
I am working on a responsive website.
Check it out here.
CSS:
body {
font-family: 'Josefin Sans', Helvetica;
color: #333;
background-image: url(../../img/back.png);
width: 80%; /* zorgt dat er bij de linkerkant en rechterkant beide 10% weg gaat */
margin: 0 auto;
font-size: 1em;
font-weight: 400;
}
header {
background-color: white;
border-radius: 6px;
margin-top: 0.5em;
padding: 1em 0 1em 0;
text-align: center;
}
footer {
float: left; /* hierdoor blijft de footer onderaan */
font-size: 0.9em;
background-color: #C0C0C0;
border-top: 2px solid #00BFFF;
border-radius: 2px;
margin-top: 1em;
padding: 2em;
text-align: center;
}
So I want to have the footer to be full width and the header to stay at 80%.
But this is impossible since I've set the body of the website to width: 80%.
How do I fix this?
You can add width:125%; margin-left:-12.5% to your footer.
A fast check: go to your website and run this javascript in the address bar to check it:
javascript:var footer=document.getElementsByTagName("footer")[0];footer.style.width="125%";footer.style.marginLeft="-12,5%";
Section your page into three parts (header, main content section, and footer) and size each one as required.
body {
font-family: 'Josefin Sans', Helvetica;
color: #333;
background:#eee url(../../img/back.png);
margin: 0;
font-size: 1em;
font-weight: 400;
}
section, header {
width: 80%;
margin: 0 auto;
}
header {
background-color: white;
border-radius: 6px;
margin-top: 0.5em;
padding: 1em 0 1em 0;
text-align: center;
}
footer {
font-size: 0.9em;
background-color: #C0C0C0;
border-top: 2px solid #00BFFF;
border-radius: 2px;
margin-top: 1em;
padding: 2em;
text-align: center;
}
<header>header</header>
<section>The main content</section>
<footer>footer</footer>
Apply margin:0px auto and width:80% for header. Apply the CSS like below.
body {
font-family: 'Josefin Sans', Helvetica;
color: #333;
background-image: url(../../img/back.png);
width: 100%; /* zorgt dat er bij de linkerkant en rechterkant beide 10% weg gaat */
margin: 0 auto;
font-size: 1em;
font-weight: 400;
}
header {
background-color: white;
border-radius: 6px;
margin-top: 0.5em;
padding: 1em 0 1em 0;
text-align: center;
width: 80%;
margin: 0px auto;
}
Give your body,content (a div that contains all your body html), header and footer the respectively those width values:
Body:
width:100%;
Header:
width:80%;
Content:
width:80%;
Footer:
width:100%;
<body>
<header>header</header>
<div id="content">Your body content</div>
<footer>footer</footer>
</body>
That should do it.
I would suggest applying the 80% width to a .container div, and have that container act almost at the 'body' of the website. You can then place the footer outside of the container, but then wrap the footer content in the same .container div. I'm assuming you just want the background of the footer to be full width and the content to stay at 80%.
So for example (inline css to show the example):
<style>
.container{width: 80%;}
</style>
<body style="width: 100%;">
<div class="container">
<header></header>
<p>Rest of content</p>
</div>
<footer style="width: 100%;>
<div class="container">
<p>Footer content goes here</p>
</div>
</footer>
</body>
I'm trying to create a fluid layout, but have a small problem with the height of the container. The outer <div> (yellow, ip_A-1) is not adjusting to the height of it's children.
See a fiddle here.
I've tried placing a spacer inside but it's not working. Also making ip_BA_1 and ip_BB_1 position:relative does nothing.
The HTML:
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
<div class="spacer_0"></div>
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
The CSS:
.spacer_0 {
clear:both;
width:100%;
height:0px;
}
.ip_A_1 {
position: relative;
width: 100%;
height: auto;
min-height: 28px;
text-align: left;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size:1em;
background: yellow;
}
.ip_BA_1 {
float: left;
width: auto;
padding: 4px 10px 20px 45px;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size: 0.88889em;
line-height: 0.88889em;
font-weight: bold;
background: blue;
color: white;
}
.ip_BB_1 {
clear: both;
float: left;
margin-top: -15px;
width: 100%;
}
.ip_BBA_1 {
position: absolute;
left: 30px;
right: 0px;
padding-left: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ccc;
border: 1px solid #666;
}
The problem is that you are using floats and position:absolute; on the children these rules prevent the children from expanding parents height.
change the ip_BBA_1 css position:relative.
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;
}
I'm trying to build a website for some coursework and my two middle columns are being pushed over to the left for some reason. The header, nav bar and footer all align vertically but the two floated divs in the middle are being forced to the left.
HTML
<html>
<head>
<title>Churches Of Norwich</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="site.css">
</head>
<body>
<div id="bg">
<div id="content">
<div id="headboxspacer"></div>
<div id="head-box">Churches of Norwich</div>
<div id="navbar" style="float: none">
<div id="tabs">
<ul>
<li>Home</li>
<li>Map</li>
<li>Churches</li>
<li>Comments</li>
<li>Gallery</li>
</ul>
</div>
</div>
<div id="container" style="overflow:hidden;width: 100%">
<div id="homeboxleft" style="clear: both">Testing</div>
<div id="homeboxright" style="clear: both" >Right</div>
</div>
<div id="footer"> footer </div>
<div id="bottomspacer"></div>
</div>
</div>
</body>
</html>
CSS
#content {
width: 1200px ;
height: max-content;
margin-left: auto ;
margin-right: auto ;
}
#headboxspacer{
height:50px;
width:100%;
}
#head-box{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
}
#navbar{
height: 50px;
background-color: #003651;
width: 100%;
margin: 5px;
padding: 10px;
font-family: sans-serif;
font-size: 20pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
text-decoration-line: underline;;
width: 100%;
}
#tabs ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
display: inline ;
}
#tabs ul li {
margin: 0 ;
padding: 10px ;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}
#tabs li a {
color: #FEE7BE;
background-color: #003651 ;
padding: 8px ;
text-decoration: none ;
display: inline ;
}
#tabs li a:hover {
color: gainsboro ;
background-color: #003651 ;
}
#container{
width: 1200px;
}
#homeboxleft{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: right;
margin: 0px;
opacity: 10%;
filter:alpha(opacity=10);
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
#mainbox{
background-color: #FEE7BE;
height: 500px;
width: 100%;
opacity: 0.6;
}
#footer{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
clear: both;
}
#bottomspacer{
height:100px;
width:100%;
}
because the padding of the navbar is added to the width of the navbar.
you have to use the box model solution with an inner div
http://css-discuss.incutio.com/wiki/Box_Model_Hack#Box-in-a-box
then you have the same widths and appearance in all browsers
Your "container" which holds the two columns is set to "width =100%".
It means that the div will spread on the entire width of the page.
Try deleting this width attribute, and beside that delete all float attributes.
I have also attached a screenshot.
and this is the fullscreen preview of the fiddle:
http://fiddle.jshell.net/zHBhs/2/show/
I think your problem is the inline css here:
<div id="homeboxleft">Testing</div>
<div id="homeboxright">Right</div>
//-------------------^-------------just removed the clear:both inline css here
and in your this css class just removed the margin property:
#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;
margin: 0; // <------------------made margin for all sides to 0
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
try this and see if this solves, checkout the fiddle here: http://jsfiddle.net/zHBhs/2/
do some work on these css classes as well:
#head-box{
padding:0; // change paddings to 0
margin: 5px 0; // just apply to top and bottom margins
}
#navbar{
margin: 0; // change paddings to 0
padding:10px 0; // just apply to top and bottom margins
}
#footer{
margin: 0; // change paddings to 0
padding:10px 0; // just apply to top and bottom margins
}
Get both of the sides, left and right in a main div. Then apply this css:
#maindiv{
overflow:hidden;
border-bottom:1px solid rgba(200,200,200,0.3);
border-top:1px solid rgba(200,200,200,0.3);
}
#left{
width:60%;
float:left;
overflow:hidden;
}
#right{
overflow:hidden;
}
Note: The right div will be attached with left one, If you want to float it to right, Apply float:right; to it. But float to only left is suggested :)
An Example for both sides using the above trick.