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>
Related
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 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'
I have a fixed header with three tabs. On the rest of the page I have both text and images. I was able to have text scroll "under" the fixed header but the images overlap. I tried setting the background of the header as an image but that did not work. I also tried various z-index values but also lacked results. I'm posting the CSS with no z-index on the header because it doesn't affect the fixed header in terms of the overlap problem, but only shifts it off-center. Is there a way to fix this with CSS?
Thanks
HTML Code:
<div class="header">
<div class="container">
<ul class="pull-right nav nav-pills">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<p>text here</p>
<img src="image.jpg"/>
<p>more text</p>
</div>
</div>
CSS code:
body {
width: 100%
margin: auto;
background-color: #f7f7f7;
}
.header {
background: #FFFFFF;
position: fixed;
top: 0;
width: 100%
}
.toolbar a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.toolbar li{
display: inline;
}
.content {
margin-top:100px;
z-index:10;
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--Tabs Here-->
</div>
</div>
You have to use a Bootstrap feature (navbar) as opposed making the div a fixed element at the top of the page.
Here is a simple frame for the layout I'm trying to achieve: http://i.imgur.com/7kmCBpd.png
I'm focused on the header at the moment, and I've managed to get it to look how I want it to, but I feel like I haven't employed the best methods. When I resize the browser width, the words at the ends of the h1 and h2 elements are pushed to the next line and it creates a jumbled mess. Ideally, I'd like all of the contents of the header to scale proportionally when the browser becomes too narrow. What is the best way to achieve this?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src='logo.png' alt="Logo" class="logo">
<h1>TITLE TITLE</h1>
<h2 id="Subtitle1">SUBTITLE 1 SUBTITLE 1</h2>
<h2 id="Subtitle2">SUBTITLE 2 SUBTITLE 2</h2>
</header>
<nav>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Resources</li>
<li>Events</li>
<li>Contact Us</li>
<li>Get Involved</li>
</nav>
<footer>
<p>© 2014 </p>
</footer>
</body>
</html>
CSS
header {
max-width: 800px;
max-height: 285px;
margin: auto;
}
h1, h2, li, p {
font-family: "tw cen mt", "century gothic", sans-serif;
}
h1, h2 {
position: absolute;
display: inline;
letter-spacing: 2px;
float: left;
}
h1 {
font-size: 5em;
}
h2 {
font-size: 3em;
}
#Subtitle1 {
top: 100px;
}
#Subtitle2 {
top: 150px;
}
.logo {
position: relative;
display: inline;
float: left;
max-width: 285px;
}
Maybe applying the following would get what you're looking for
h1, h2 { white-space: nowrap; }
You can use media queries to resize elements based on window size.
Also, as a general tip, try using {display: inline-block;} instead of {float: ...;}. It will vastly simplify a lot of cases.
First, of all it would be a good practice if you wrap your headings with a div and float this instead of the headings. Something like this:
HTML
<header>
<img src='logo.png' alt="Logo" class="logo">
<div id="h-container">
<h1>TITLE TITLE</h1>
<h2 id="Subtitle1">SUBTITLE 1 SUBTITLE 1</h2>
<h2 id="Subtitle2">SUBTITLE 2 SUBTITLE 2</h2>
</div>
</header>
CSS
header img,
header #h-container { float:left; }
Second, you should not mix float with absolute positioning. In this case there is no need to absolute position your headings.
As for the scaling, you could use media queries to target specific browser widths and reduce the font size for smaller widths.
If you want your logo to scale too you could do something like:
HTML
<div id="logo-container">
<img src='logo.png' alt="Logo" class="logo">
</div>
CSS
#logo-container { max-width:200px; min-width:100px; }
#logo-container img { width:100%; height:auto; }
So I've been having trouble horizontal centering two images in a div called content-pic. I've tried the solutions found here How to vertically center image inside div and here How to vertically center image inside div the solutions didn't seem to work for my problem specifically. My question is how do horizontal center images via css in my div content below header? I is there a property that I'm missing or am i just going to have to mess around with padding/margin until they look right?
html
<body>
<div id="wrapper">
<div id="header">
<div id="mast"><img src="http://i1256.photobucket.com/albums/ii488/terafanb/guildwars2/26.png" height="99" width="774=" /></div>
<div id="below-mast">
<!--Start of below mast -->
<img class="nav" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="226" border="0" alt="Crusader Army" />
<img class="Guy" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="549" border="0" alt="Crusader Army" />
</div>
<!--end of below mast -->
</div>
<!--end header -->
<div id="content">
<!--Start of content -->
<img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
<img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
</div>
<!--End of content -->
<div id="footer">
<ul>
<li>Home</li>
<li>What is a 1031 Exchange?</li>
<li><a href="exchangeRequ.html">
1031 Exchange Requirements</a>
</li>
<li>Types of Exchanges</li>
<li>How to get Started</li>
<li>Why CLX?</li>
<li>Resources</li>
<li>FAQs</li>
<li>Fees</li>
<li>Contact Us</li>
</ul>
</div>
<!--end of footer -->
</div>
<!--End of Wrapper -->
CSS
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto; /* use shorthand */
width: 774px;
}
#content {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: green;
}
ul {
list-style: none;
margin: 20px auto;
width: 600px;
}
dd {
margin-left: 6em;
}
.nav{float: left;}
.Guy{width:500px;
margin-left: 30px;
}
.content-pic{}
.we-pay {
font-size: 13px
}
.note{
text-align:center;
}
.disclaimer {
font-size: 13px;
text-align: center;
font-weight: bold;
font-style: italic;
}
.FAQ{
font-size:14px;
}
.FAQ li{
margin:20px 0px 20px 0px;
}
.Question{
font-weight:bold;
}
#footer {
clear:both;
text-align:center;
margin-top:300px;/* The margin is so large becuase it is cleared and need to be larger much large than content */
}
#footer li {
display: inline;
border-left: 2px solid #000;
padding: 0 3px 0 3px;
}
#footer li:first-child {
border: none;
}
#footer a {
font-family: Helvetica, sans-serif;
color: #300000;
}
Here is my code on code pen for you convenience http://codepen.io/Austin-Davis/full/fJLEn.
just remove the float: left; attribute from the content div. It will center the images.
Tell me if it is not what you want.
you should remove float:left from #content div
#content {
/*float: left;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: green;
}
Remove float:left and it'll work fine
I dont see a div called content_pic so I assume you want to center the div with id #content that has the img.content_pic in it.
Since its parent has a fixed width you could use the same technique you are using to center the wrapper:
#content {
margin: 0 auto;
}
Based on your edit I now understand that you want to center the images inside the div #content. Well since that div does not have a set width, it is shrink wrapping your images. It doenst have room to justify your images horizontally.
You will need to set the width of the content div to be that of the wrapper and then center its contents, or you will have to give it a set width that is smaller than the wrapper and then use the technique I originally described.