I want the elements within my top logo div to be centered. I'm not sure quite how to do that.
My navigation div is not matching up with the logo div. There is still space between the divs even tho I have set the margins to 0px.
My placeholder graphic for some reason has more padding on the bottom than anywhere else within the logo div. What do I need to do to change that?
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
margin: 0px;
}
#logo p {
display: inline;
}
#logo h2 {
display: inline;
}
#logo a {
float: right;
color: rgb(255, 200, 0);
text-decoration: none;
font-size: 1.25em;
padding: 10px;
}
#navigation {
background-color: rgb(255,200,0);
width: 100%;
margin: 0px;
}
body {
margin: 0px;
font-family: Arial, Helvetica, Verdana;
}
</style>
</head>
<body>
<div id="logo">
<p>
<img src="picture.jpg" >
</p>
<h2>SUBSCRIBER PORTAL</h2>
LOG-IN
CONTACT US
</div>
<div id="navigation">
<p>
This is just a navigation test.
</p>
</div>
<div id="contents">
<p>This is just some dummy text. Dummy. </p>
</div>
</body>
</html>
1) give the img { vertical-align:middle; }. also remove the around the img.
2) have you tried padding:0;?.
3) padding-bottom:-<value here>px; or you could try just padding:0; or padding-bottom:0;.
I'm not sure about the questions, because they are not really setup well.
Use position: absolute; in your CSS for your navigation and logo or a tags to specify exactly where you want them to appear. Such as this example:
#logo {
position:absolute;
top: 170px;
left: 300px;
}
Related
I am coding a practice site using Microsoft Expression Web 4 but I am having a lot of difficulty getting past the landing page. I have all code copied below the questions. The first problem is that I have a hover effect on the links in the nav menu that overlaps the nav bar and I want the text centered within the nav bar vertically. I have tried several how-tos on css-tricks.com and the browser display doesn't seem to respond to the edits I make I tried from there. navbar issue and overflowing image I can manually adjust it so that if fits by figuring out pixels by trial and error but this seems clunky and non-responsive. Is there a better way?
The second question is the image I have for the header section is not fitting the screen properly. It overflows on the right side. It didn't do this before, but now it is and I haven't changed any of the code in the #header img {} section, so I am not sure what happened. I'm pretty much a beginner at this so thanks for any help.
HTML
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<div id="header">
<div class="nav">
<div id="menu">
Home
Travel
Safari
Live
Search
</div>
</div>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</div>
</head>
CSS
#header {
position:relative;
width: 100vw;
height: 600px;
overflow:hidden;
right: .5em;
bottom: 1em;
}
#header .nav {
display:inline-block;
height:40px;
width:100%;
background-color:#a41d0e;
overflow:visible;
z-index: 10;
}
.nav #menu a{
display: inline;
float:left;
position: relative;
vertical-align:middle;
padding: 1em 1em 1em 1em;
text-decoration: none;
color: white;
}
.nav #menu a:hover {
background-color:#7f170b;
}
Use CSS properties display: flex and align-items: center to center vetically items in a row.
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
height: 40px;
padding: 1em;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
<html>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</header>
<body>
<html>
Nothing except the link tag should be between <head></head> in the exmple you gave! I assume that's a mistake.
#header {
width: 100vw;
height: 600px;
overflow:hidden;
}
technically you don't need any styles for your header. See css for img below. If you want to your header to be 600px, and have your image fill it, you should set your image as a background image in css
background-image: url('path/to/img.jpg');
Alternatively, you could :
/*style your image like so. It won't ever be wider than its immediate parent container*/
img{
max-width: 100%;
height auto;
}
Here is the rest of your css, commented.
#header .nav {
/* no need for any display property here as it is block by default and takes up 100% of the width you probably don't need it to be inline-block either if it'll take up 100% of the width */
height:40px;
background-color:#a41d0e;
/*z-index is only useful for positioned elements (relative, absolute or fixed) so either give position: something to your navbar or ditch the z-index !*/
}
As far as the links go you don't need to give them a top and bottom padding, just give them a line-height that is equal to the height of the container, that is 40px. That way the links will be vertically centered, with the same height as their container, and you will still be able to give them the width of your choice with left and right padding.
.nav #menu a{
/*don't need display: inline as it is negated by the float anyway.
position relative alone like this doesn't serve any purpose. vertical-align middle only works for display: inline-block or table/(s)*/
float:left;
line-height: 40px;
padding: 0 1em 0 1em;
text-decoration: none;
color: white;
}
Very useful link where you'll find a whole lot of very useful explanations on all things CSS : http://tympanus.net/codrops/css_reference/
Hope any of this helps!
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
padding: 15px 35px;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
.outer {
width: 100%;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: 0;
left: 0;
width: 100%;
}
img {
position: relative;
left: 0;
right: 0;
width: 100%;
}
h1 {
text-align: center;
position: absolute;
left: 0;
top:0;
right: 0
}
</style>
</head>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<div class="outer">
<div class="inner">
<img src="https://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
<h1>Visit Africa</h1>
</div>
</div>
</header>
</body>
</html>
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.
I'm trying to get my header and image to line up exactly on the same line but am having difficulties. Can anyone see why/suggest a fix?
<!DOCTYPE html>
<html>
<head>
<style>
#header img {
position: relative;
width: 75px;
height: 75px;
}
#header h1 {
color: white;
float: left;
background-color:#006890;
font: 75px arial, sans-serif;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
<img src="2000px-Smiley.svg.png" alt="Smiley Face" >
</div>
</body>
</html>
it's because of the h1 default margin, you see? elements comes with default styling and you need to custom it to your needs, generally for what you want you need to remove the margin-top from h1 but you can also set it to margin: 0; if you dont need the margin-bottom.
#header h1
{
color: white;
float: left;
background-color:#006890;
font: 75px arial, sans-serif;
margin: 0;
}
example: http://jsfiddle.net/L2e1rL6L/
In addition to #header h1 css you should do
#header h1 {
margin:0;
}
thats it.
Wouldn't you need to have the image inside the <h1><img > </h1> tags?
i'm having this problem where i cannot make the padding of a button constant with the column width. it is necessary for me because when a user is to hover onto the button, it changes background. but if i use a static value for the button padding width, it will get distorted once anyone zooms in our out two three levels. i tried to use the values as %, but to no avail. help will be much appreciated!
you may easily try out my code on ur own pc and see what i'm talking about:
html:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<!--<link rel="shortcut icon" href="#" />-->
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<center>
<div id="main">
<div id="header">
</div>
<div id="menupane">
<center>Home</center>
</div>
</div>
</center>
</body>
</html>
css:
#main
{
width: 80%;
height: 590px
}
#header
{
background-color: #1f3568;
height: 12%;
}
#menupane
{
background-color: #cfd3db;
height: 85%;
width: 8%;
float: left;
}
.buttons
{
color: #1f3568;
text-decoration: none;
margin-right: 0px;
line-height: 40px;
}
.buttons:hover
{
background-color: #677ba7;
}
thanks in advance
Add display:block to .buttons to fill the width of its parent
.buttons
{
display:block;
text-align:center; // removed CENTER element
color: #1f3568;
text-decoration: none;
margin-right: 0px;
line-height: 40px;
}
jsFiddle
This is what I would do. I would remove the and update my CSS. And like Don said that tag is deprecated. Update this on your page and let me know if this is what you want.
HTML Update:
<div id="menupane">
Home
</div>
CSS
#menupane
{
background-color: #cfd3db;
height: 85%;
width: 20%;
float: left;
}
a.buttons
{
display:block;
color: #1f3568;
text-decoration: none;
margin: 0px;
line-height: 40px;
}
a.buttons:hover
{
background-color: #677ba7;
}
Say I have div that is a specified width of 200px. Then I have 3 h1 elements in that div with different amounts of letters / different widths. How do I stretch them horizontally to fill the div?
<div id="Header">
<div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>
What I need is the words to be same width---the width of the containing div.
I tried text-align justify on the h1 but that didn't do any good.
.Logo {
margin-left: 100px;
height:auto;
width: 250px;
background-color:#666;
font-family: Impact, Charcoal, sans-serif;
text-align: justify;
}
.Logo h1 {
font-size: 40;
text-align:justify;
display: inline;
}
I don't think there's a pure CSS way to do it as of now (I mean using some straight CSS way, you need to juggle things around), what you can do is use nth-of-type in CSS and give letter-spacing to each.. this way you don't have to declare classes for each h1 and also you'll get stretched text
Demo
<div class="Logo">
<h1>CORROBORREE</h1>
<br />
<h1>FROG</h1>
<br />
<h1>PROJECT</h1>
</div>
html, body { /* Using this or not depends on you,
nothing to do with the example */
width: 100%;
height: 100%;
}
.Logo {
background: #f00;
width: 300px;
}
.Logo h1:nth-of-type(1) {
letter-spacing: 4px;
}
.Logo h1:nth-of-type(2) {
letter-spacing: 70px;
}
.Logo h1:nth-of-type(3) {
letter-spacing: 25px;
}
Why you want to do it, I don't know, cuz this will look super weird
Use letter-spacing
eg: letter-spacing:20px
Check this out:
Demo
CSS:
#Header{
width:200px;
height:200px;
background-color:grey;
overflow:hidden;
}
#h1{
-webkit-transform:scaleX(0.78);
margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
margin:0 0 0 70px;
}
#h3{
-webkit-transform:scaleX(1.3);
margin:0 0 0 25px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="Header">
<div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1 id='h3'>PROJECT</h1></div></div>
</body>
</html>
text-align:justify and display:block.
And there can be only the one h1-tag on one page