I have a webpage with an image and a section of text which I'm trying to stack in a vertical line. I figured adding display: block; to .about div would be the appropriate way of doing this. It gives me the vertical stack that I want, but impacts the overall layout of the page. At first I thought it was pulling the header section down the page, but when I inspected the page, it seems as if this command is actually shifting the entire body section down the page. Not sure what is causing this.
<body>
<header>
<a href="index.html" id="logo"> <h1>
<div id="header_title">
Name
</div></h1> </a>
<div id="header_border"></div>
<nav id="nav">
<ul>
<li>
<a href="index.html" class="selected" >About</a>
</li>
<li>
Resume
</li>
<li class="subNav">
<a>Portfolio</a>
<ul>
<li>
Writing Samples
</li>
<li>
Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="about_div">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
</div>
<div class="about_div">
<h3 id="about_me">About Me</h3>
<p id="about_me_info">
Text
</p>
<p id="about_me_info">
More Text
</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>
© 2016 My Name.
</p>
</div>
</body>
And CSS:
body {
font-family: 'Playfair Display', open sans;
position: relative;
height: 100%;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding-top: 18%;
}
.about_div {
display: block;
margin-top: 50px;
}
.about_div img {
margin-left: 125px;
}
.about_div h3 {
margin-top: 50px;
margin-right: 1%;
}
.about_div p {
margin-right: 1%;
}
.profile-photo {
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#about_me {
font-size: 2em;
}
#about_me_info {
font-size: 1.5em;
}
How header spacing should look (with inline-block)
How header spacing actually looks when applying display: block
Note that this isn't technically a problem with the header, but rather the entire body section is shifting downward in the second example.
Remove display:block from '.about_div' and add display:flex to '#wrapper'
Related
I can't figure out why my logo img is leaking into my navigation and not aligning. I need the logo to align with the h1 and h2 in my header. It currently looks like this:
Here is my html:
<body>
<div id="headerWrapper">
<header>
<img src="images/logopracticedone.png" alt="">
<h1>Science Museum</h1>
<h2>A Celebration of Technology & Mechanics</h2>
</header>
</div>
<div id="navWrapper">
<nav class="clearfix">
<ul>
<li class="active">Visit Us</li>
<li>See and Do</li>
<li>Learning</li>
<li>Education</li>
</ul>
</nav>
</div>
Here is my SCSS:
body {
font-family: $fontFamily;
font-size: 16px;
font-weight: $regularWeight;
}
header {
img { max-width: 100%;
max-height: 100%;
float: left;}
padding: 1rem $gutter;
h1 {
margin: 0;
font-size: 1.5rem;
font-weight: $semiBold;
} //end of h1
h2{
margin: 0;
font-size: 1.2rem;
font-weight: $regularWeight;
} //end of h2
} //end of header
Remove float from img
Adjust the height in css of img to fit according to your design.
Move the headings into a div to cover for removing that float.
Make display inline-block for both the new div and img
<img src="images/logopracticedone.png" alt="">
<div>
<h1>Science Museum</h1>
<h2>A Celebration of Technology & Mechanics</h2>
<div>
I'm writing the CSS for my site. I have text that I am putting on top of my background image. My HTML and CSS is below:
HTML
<header class="site-header">
<div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div>
</div>
<div class="site-header__menu-content">
<div class="site-header__btn-container">
Request A Demo
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
<li>Home</li>
<li>Services</li>
<li>Why Us</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="section">
<picture>
<img src="assets\images\pepper.jpg">
</picture>
<div>
<div class="section__text-content">
<h1 class="section__title">Company</h1>
<h3 class="section__sub-title">Company Slogan</h3>
<div class="btn-container">
<a class="btn" href="#">Talk To A Specialist</a>
<a class ="btn btn__white btn__pepper-white" href="#">Get A Quote</a>
</div>
</div>
</div>
</div>
CSS
.section {
position: relative;
max-width: 100%;
&__text-content {
position: absolute;
top: 30%;
width: 100%;
margin-left:
}
&__title {
font-size: 7rem;
font-weight: 300;
color: #ffffff;
margin-bottom: 0;
}
&__sub-title {
font-size: 2.5rem;
font-weight: 300;
margin-top: 3%;
margin-bottom: 2%;
color: #ffffff;
}
}
The problem arises when I try to add a margin-left to the .section class in my CSS, because then a blank which space to the right of my screen appears with a horizontal scroll bar in direct proportion to the amount of margin I specified to move to the left.
I know that I could use a simple "background-image" for my css, but I'd prefer to do it this way for responsive imaging (it's how I learned to do it and I'm on a bit of a time crunch).
Any suggestions?
FIXED
My problem was I was writing my margin in relative terms by doing:
.section__text-content {
position: absolute;
margin-left: 10%
}
Which is wrong, because the &__text-content is set to position: absolute
Percentage is relative position, with an absolutely positioned image you need absolute margins (i.e. pixels)
I have seen the similar questions on Stackoverflow, I tried their instructions but still it makes no difference. I have done the margin:0 padding:0 on my code too.
The first div is the side bar, the second div is the content(blue), and there is white space on the right. The space on the right isnt a third div, it seems to just be white space. I dont want the white space to be there.
Here is my CSS/HTML:
#dashboard {
width: 100%;
}
#content {
float: right;
width: 80%;
overflow: hidden;
background: aqua;
}
#sidebar {
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: bolder;
line-height: 18px;
color: #c5cdd1;
text-decoration: none;
background-color: #14253f;
width: 220px;
height: 100%;
float: left;
width: 20%;
overflow: hidden;
}
<section id="dashboard">
<div id="sidebar">
<!-- Logo -->
<div id="logo"><img src="img/FDMxLogo.png" /></div>
<!-- Nav -->
<nav id="nav">
<a class="mob-nav"> </a>
<ul>
<li id="m-item" class="current">
<img src="img/ico_home.png" />DASHBOARD
</li>
<li id="m-item">
<img src="img/ico_report.png" />REPORTS
</li>
<li id="m-item">
<img src="img/ico_cust.png" />CUSTOMIZE
</li>
<li id="m-item">
<img src="img/ico_set.png" />SETTINGS
</li>
<li id="m-item">
<img src="img/ico_about" />ABOUT
</li>
<li id="m-item">
<img src="img/ico_con" />CONTACT
</li>
</ul>
</nav>
</div>
<div id="content">
Add Graph<br>
<br>
<br>
<br>
<?php echo $div;?>
<button style="margin-top:0em;width:100%; " type="submit" onClick="remove();">REMOVE</button>
</div>
</section>
Here is a simple edit you could try.
I added
display:table;
to #dashboard.
I removed float from both #content and #sidebar. I also removed thie width percentages from both but left the width:220px. in sidebar.
Then I added
display:table-cell;
to both #content and #sidebar.
Fiddle:https://jsfiddle.net/r5jcv2yu/
The 80% width on #content is messing it up I think. You are also using width twice on #sidebar
I have been trying to figure this little bugger out for a little while, and now I seek some expertise. What am I trying to do? I want to create a 100% width menubar, but keep the logo, and the content centered so it can fit in with the rest of the content. The container is on 1000px. Right now I have placed my menu outside of the container tag, and used "width: 100%" to get it to cover the screen. However with that the content moves to the left. I don't really know how to fix this, I have been working on it for a while.
Here is my HTML code:
<body>
<!-- navigation / header -->
<div class="grid_12" id="menu">
<div class="grid_3" id="logo">
<img src="img/logo.png" alt="logo" />
</div>
<div class="grid_9 omega">
<ul class="nav">
<li>
<label>
Features
<br />Check our features
</label>
</li>
<li>
<label>
Pricing
<br />Starts at $X/month
</label>
</li>
<li>
<label>
30-day free trial
<br />Start using us right away
</label>
</li>
<li class="sign-btn">
Log in
</li>
</ul>
</div>
</div>
<div class="container clearfix">
and here is my css file:
#menu {
width:100%;
margin: 0 0 0 0;
padding: 0;
background: #1d3853;
color: white;
font-size: 13px;
}
.nav li {
padding-top: 15px;
list-style:none;
float: left;
text-align: center;
margin-right: 20px;
}
.nav li a {
color: #a7c5e3;
font-family: helvetica;
font-weight: bold;
letter-spacing: 1px;
}
.sign-btn a {
color: #FFF;
display: block;
background: #105296;
padding: 10px 15px;
text-align: center;
border-radius: 5px;
border: 1px solid white;
}
So I ask again, dear StackOverflow... how do I get my links in the center with the rest of my content. Like this picture: http://www.cssnewbie.com/wp-content/uploads/2009/12/centered-navbar-sketch.png
write your navigation code inside another div with class=container.
That is
<body>
<div class="container">
<!-- your navigation code here-->
</div>
</body>
To center something with a set width, add the style margin:auto. To be more precise, you only need margin-left:auto and margin-right:auto to give equal padding to an element inside a container.
I have a footer in my webpage which nests 3 divs with twitter bootstraps span4 class. I want to have the 'Connect With Us' the same distance from the right as the 'Contact Us' header is from the left and the 'Useful Links' in the middle with all the text for each div left justified underneath.
This is what I have so far:
You can see that Contact Us is closer to the left edge than Connect With Us is from the right edge.
I have tried using text align for the headers which works however the list items below do not left align with the elements.
Here is an image which shows what it is like with the text-align on the headers. You can see that they are laid out as I want but the content below them is not left aligned with them:
Here is the HTML for the footer:
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div class="span4" id="leftFooter">
<h5><b>Contact Us</b></h5>
<ul>
<li>Tel: 01234 567897</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4" id="middleFooter">
<div class="middle"><h5><b>Useful Links</b></h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul> </div>
</div>
<div class="span4" id="rightFooter">
<h5><b>Connect With Us</b></h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li>
</ul>
</div>
</div>
</div>
</footer>
Here is the CSS for the footer:
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#leftFooter {
color: #ccc2a0;
padding-left: 50px;
}
#middleFooter {
color: #ccc2a0;
/* text-align: center; */
}
#rightFooter {
padding-right: 50px;
/*text-align: right; */
color: #ccc2a0;
}
#rightFooter li {
padding-top: 5px;
}
.follow { line-height: 19px; }
Can anyone help?
Thanks
EDIT:
Here are the changes I made to the right footer:
<div class="span4" id="rightFooter">
<div class="trow"> <h5 class="tcell"><b>Connect With Us</b></h5> </div>
<ul>
<div class="trow"> <li class="tcell"><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li> </div>
<div class="trow"> <li class="tcell"><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li> </div>
</ul>
</div>
CSS:
.trow {
display: table-row;
background-color: green;
margin-right: 0;
}
.tcell {
display: table-cell;
background-color: green;
}
.trow h5 {
display: table-row;
background-color: yellow;
}
and here is what it looks like with the rows and cells coloured:
You can use display: table-cell to make the block behave as table cells, which can style further to make them the same width.
You can also float the blocks or use display: inline-block and give each block a third of the width, but when zooming you may get rounding errors that can cause the last block to jump to the next line. When the block behave like table-cells, you don't have that problem.
I renamed some of your CSS ids and removed some markup in your HTML like the b tag (not sure why you were using that). Your ampersand & should be &.
Added a couple DIVs .outer and .inner that center the contents of the second .span4 but maintain the left alignment. The main thing there is the float: left; on .outer which sets the width of .outer to it's content. You could also use display: inline-block; instead of float: left;. .outer is moved left 50% of it's container and then .inner is moved right 50% of it's container (.outer). In the end it ends up in the center of .span4.
For the third .span4 we added a DIV with the class .pull-right which is from your Twitter Bootstrap that floats things to the right. This sets everything to the right side of the third .span4 without re-aligning your text.
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#contact-us {
padding-left: 50px;
}
.outer {
position: relative;
left: 50%;
float: left;
}
.inner {
position: relative;
right: 50%;
}
#connect-with-us {
padding-right: 50px;
}
#connect-with-us li {
padding-top: 5px;
}
#connect-with-us a {
padding-left: 5px;
}
.follow {
line-height: 19px;
}
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div id="contact-us" class="span4">
<h5>Contact Us</h5>
<ul>
<li>Tel: 01234 567897</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4">
<div class="outer">
<div class="inner">
<h5>Useful Links</h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
</div>
<div id="connect-with-us" class="span4">
<div class="pull-right">
<h5>Connect With Us</h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px">Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px">Twitter</li>
</ul>
</div>
</div>
</div>
</div>
</footer>