How do I position certain elements, like headings, horizontal rows, etc so they are in the position I want them to be. It's quite difficult to explain, but here's an example so you can understand.
I have my basic logo placed in the top left (it's a template logo for now) on the same line, or same "position" I need it to be placed directly opposite the logo on the other side of the page. Only problem is that it appears below my logo.
Here's an example of how I expect it to be:
https://gyazo.com/b904252fa22783b78e820d57318798cc
This is how it really is:
JSFiddle: https://jsfiddle.net/seesqz9u/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<a href="http://www.steamcommunity.com/login/">
<h3 style="float: right; position: fixed;">SIGN IN WITH STEAM</h3>
</a>
<div class="navbar">
<ul>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Content which uses float: right; should appear before left content in the HTML.
In other words, move your <h3> tag above the div containing the logo, and remove the position property, it's not necessary.
You should also change the order of the tags -- <h3><a> rather than <a><h3>
<body>
<h3 style="float: right;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
updated filddle
You have put the logo in a div element.
The div element will take the complete row and will not allow any other element to come beside it. (in css terms it is a block element)
Either keep the logo in span element orelse add css in your logo div and make it display as inline-block
display: inline-block;
Related
Ok I'm recreating a PSD I found online for practise. In the header there is a search bar and button. To the right of the button there is extra content taking up space, which I can't get rid of.
I have added a jsfiddle
https://jsfiddle.net/jb7j6ysz/
Please ensure the preview is expanded to the left as much as possible
<!DOCTYPE html>
<html>
<head>
<title>Education Compaony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="branding">
<h2>Education Department</h2>
<h5>A free PSD template</h5>
</div> <!-- /.Branding -->
<div class="directory">
<div class="search">
<input type="text">
<input type="submit" value="Search">
</div> <!-- /.Search -->
<div class="index">
<ul>
<li>A - Z index | </li>
<li>Studenet Login | </li>
<li>Staff Login </li>
</ul>
</div> <!-- /.Index -->
</div> <!-- /.Directory -->
</div> <!-- /.Header -->
</body>
</html>
/* Font Import */
#import url('https://fonts.googleapis.com/css?family=Lora');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.header{
height: 95px;;
background-color: #FCD05D;
color: #3A302E;
font-family: 'Lora', sans-serif;
}
.branding {
float: left;
margin-left: 200px;
}
.branding h2 {
margin-top: 10px;
text-transform: uppercase;
font-size: 28px;
}
.branding h5 {
margin-top: -20px;
font-size: 16px;
}
.directory {
float: right;
margin-right: 200px;
}
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 0px 5px 12px;
}
.search input[type=text] {
background-color: #FCD05D;
border-radius: 3px;
}
.search input[type=submit] {
background-color: #595657;
color: #FCD05D;
border: 2px solid #595657;
border-radius: 3px;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: -0;
}
.index li {
margin-top: -20px;
font-size: 14px;
display: inline-flex;
word-spacing: 1px;
}
The extra space is coming from the ul where your links are. Since the width is auto, the list section has a greater width than your search section so the search section takes on that width.
You can set padding: 0 to the ul list to reduce some of the space. It has a natural padding to the left. This will still leave some space on the right because of the length of your list. You can set width to the search area to prevent the list from wrapping. Or you could make the search section float left but you will need to adjust padding to make it look symmetrical
Here is an example
https://jsfiddle.net/jb7j6ysz/3/
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 12px 5px 12px;
float: left;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: 0;
padding: 0;
}
I used float for the new fiddle and added padding 0 to the ul. Also adjusted the padding on .search
The index div is in the way. Update your css with this
.index{
position: absolute;
display:block;
left: 40%;
}
The extra space is coming because of your Ul items. Add this in your css
ul{
padding-left:0px;
}
I think your problem is to do with the width of the .index div. Both it and your search bar are contained within the same .directory div. Because both are block-level elements with their width set to the default auto, they take on the width of their parent, which in this case is set by the largest child, the .index div.
By setting the search bar to display: inline-block;, it will only take up as much width as it needs.
.search {
...
display: inline-block;
}
Additionally, the ul used for the .index div has padding-left by default, which you may want to set otherwise.
I'm in the process of building a webpage, and I have a background image that spans the entire screen. When pressing ctrl and - (or ctrl and scrolling down), this scales down the image so it becomes smaller (I'm sure everyone's aware of what it does).
My question is, is there a css property that allows me to keep the image scaled (i.e. the size never changes, and it still spans the whole webpage) regardless of zooming in and out of the window?
I've googled for my answer, checked w3school, etc, but everything seems to be linking to actually physically scrolling up and down the webpage and leaving the image static, which is not what I want.
This is what my webpage looks like normally: https://gyazo.com/bf2a6cbcd8bda136c371278c2ca7c538
and when I zoom out: https://gyazo.com/0a79d2142073fa0dec0eba60e8f9c5e4
I'd like the background to continue spanning the entire page, I don't care about the navigation bar/footer size decreasing.
http://www.dragonstoneproductions.com/ This website demonstrates what I'm trying to achieve (try zooming out).
Any help/pointers to some resources is much appreciated
HTML:
<head>
<meta http-equiv="refresh" content="4">
<link href="main1.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
</head>
<header>
<nav>
<ul>
<li class="active"><strong>Home</strong></li>
<li><strong>About Me</strong></li>
<li><strong>Portfolio</strong></li>
<li><strong>Contact</strong></li>
<li><strong>Links</strong></li>
</ul>
</nav>
</header>
<body>
</body>
<footer>
<div class="col">
Copyright © 2016<br>
<span style="font-size:0.6em;">HTML5 | CSS3 | JavaScript</span></span></div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/linkedin.png" alt="My LinkedIn" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/gmail.png" alt="Email Me" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/bitbucket.png" alt="My BitBucket" height="41" width="50" border="0">
</a>
</div>
</footer>
CSS:
body {
margin: 0;
}
header {
background: url(images/bg-image.jpg) center no-repeat fixed;
width: 100%;
height: 100%; /* viewport units are good for sizing big containers */
background-color: red;
background-size: cover;
}
.tint img {
opacity: 0.8;
background-size: cover;
}
nav {
position: fixed;
top: 0;
left: 0;
right:0;
background: rgba(139,23,28, 0.5);
padding-top: 5px;
padding-bottom: 5px;
}
nav h1 {
display: inline;
font-family: lobster;
color: #fff;
padding-left: 30px;
padding-right: 60px;
}
nav ul {
display: inline;
text-align : right;
}
nav ul li {
font-family: arial;
display: inline-block;
list-style-type: none;
padding: 5px 20px;
text-align: center;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
letter-spacing: 0px;
margin: 0;
font-size: 15px;
text-align: center;
}
footer {
background: #8B171C;
color: white;
width: 100%;
display: inline-block;
}
#copyright {
text-align: left;
padding-right: 150px;
display: inline;
}
.sociallink {
height: 30px;
width: 30px;
}
.col {
float: left;
margin: 1%;
}
The answer is in the page you linked: background-size: cover;.
Working Example on how to apply it here: http://codepen.io/wilman/pen/vGKqjm
body {
background: url(background.jpg) center no-repeat fixed;
background-size: cover; /* forces bg to span the entire screen */
background-color: #111;
color: #FFF;
}
Also try to avoid using html img elements for backgrounds as they are not very convenient for that purpose. See When to use IMG vs. CSS background-image? for more info.
I'm following an exercise on Pluralsight, but I'm struggling with a part which appears to work on the video, but doesn't with my code.
I've played around with the CSS and tried it in MS Edge and Google Chrome, but the behaviour is the same, so I must be missing something.
I've added a green border in the #wrapper to highlight the problem. There is still a red border above the "The World" header.
Here is the html5 code (super basic btw!):
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
background-color: red;
}
label {
font-weight: bold;
display: block;
}
input {
width: 150px;
}
/*css selector*/
input[type=text], input[type=password], textarea {
width: 150px;
}
input[type=submit] {
width: auto;
}
#main {
background-color: #e9e9e9;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #222;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.activeitem {
font-weight: bold;
}
#sidebar {
background-color: #2a2c36;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
}
#wrapper {
margin-left: 250px;
border: 4px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>The World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body>
<div id="sidebar">
<img src="Images/User1.jpg" alt="headshot"
class="headshot" />
<span>Joe Soap</span>
<ul class="menu">
<li class="activeitem">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<h2>The World</h2>
<p>This will be a fun website soon.</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location:</label>
<input />
</div>
<div>
<input type="submit" value="Add" />
</div>
</form>
</div>
<div id="footer">
© 2015 The World Ltd
</div>
</div>
</body>
</html>
Any insights on how to resolve this problem would be great? Also, while a smaller issue, but is it me or does the main body appears to be 1 or 2 pixels higher than the sidebar?
Thanks
UPDATE-1:
I've resolved the problem but I don't understand why that's solving it.
In the #main definition, if I set the padding to 1px it removes the gap above the 'The World' header. If it is set to 0, it is visible. If it is to 4, it removes it, but I can see the content is being pushed further in.
#main {
background-color: #e9e9e9;
margin: 0;
padding:1px;
}
So can someone explain to me why I have to set this to 1px in order to remove this gap and why is it that when I set to 0, it displays it?
Thanks.
Thierry
Add a CSS rule for <h2> with margin:0 or margin-top:0. This overcomes the default browser settings for the element.
The h2 tag gets the style "-webkit-margin-before: 83em" automatically from the browser. You have to reset it explicitly:
-webkit-margin-before: 0
Weebly Menus and logos
So I have been reading everywhere that I can think of online to fix an issue with logo and navigation being on the same line. And yes I have attempted the other articles on Stackoverflow.
I have changed lines of code, added lines of code and it moves things around but refuses to put them on the same lines.
The code is this:
/* LOGO & MENU */
#header{
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.navContainer{
width: 500px;
height: auto;
background: url('navbg.jpg') repeat;
text-align: right;
display: inline;
overflow: hidden;
}
.logo {
width: 200px;
min-height: 20px;
height: auto;
margin: none;
float: left;
display: inline;
}
span.wsite-logo {line-height: 1;}
#logo, #logo a, #wsite-title {
color: #2a2a2a !important;
text-decoration: none !important;
font-family: "Open Sans", sans-serif;
font-size: 44px;
font-weight: lighter;
font-weight: 300;
line-height: 1;
}
/* Navigation Menu */
#navigation{
float: right;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
height: 100px;
display:inline;
overflow: hidden;
}
#navigation a, #icontent #navigation li:last-child a{
display:inline-block;
text-decoration:none;
line-height: 1;
padding: 20px 16px;
border-right: 1px solid #eee;
}
#navigation li:last-child a, #icontent #navigation span:last-child li a{border-right: none;}
#navigation ul{margin: 0; list-style: none;}
#navigation li{display:inline;}
#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 0; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { width: 162px; text-align: left; margin-top: 2px;}
#weebly-menus .weebly-menu li a {
border: none;
display: block;
background-color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: normal;
line-height:1;
padding: 5px 0px;
color: #000;
font-family: Helvetica, sans-serif;
width: 160px;
height: auto;
border: 1px solid #eee;
}
#weebly-menus .weebly-menu-wrap, #wsite-menus .wsite-menu-wrap {
z-index: 5000;
margin: 0;
postiion: relative !important;
}
Please help. I am wanting to learn more but do you ever get to the point where your brain is just fried from trying different what you hope are solutions, and it turns out not to work. THAT IS WHERE I AM RIGHT NOW!!!!
The link to the site is this :Site preview
Also I am having trouble putting simple text to the right of the navigation.
The HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class='tall-header wsite-theme-light'>
<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>
<div id="wrapper">
<div id="bar">
<div class="frame clearfix">
<div class="bar-text"><p>{call:text}</p></div>
<div id="search-button"><i class="af-search"></i></div>
<div class="social-frame">{social}</div>
<div class="search-bar">{search}</div>
</div>
</div>
<header id="header">
<div class="navContainer clearfix">
<div class="logo med-padding">{logo}</div>
<nav><div id="navigation">{menu}</div></nav>
</div>
<div class="sliderContainer">
<div id="tall-header-image" class="wsite-header"></div>
</div>
</header>
<div id="main" role="main">
<div class="frame">
<div class="content large-padding">{content}</div>
</div>
</div>
<footer>
<div id="footer" class="large-padding clearfix">
<div class="frame">
<div class="note" style="text-align: center;"><p>Drag & drop footer content here</p></div>
<div id="footer-content" class="med-padding">{bottom:content} </div>
<div id="footer-content" class="med-padding" style="display:none;">{footer}</div>
</div>
</div>
<div id="footer-bottom" class="feature small-padding">
<div class="frame">
<div class="copyright"><p>{copyright:text}</p></div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="/files/theme/basic-header.js"></script>
</body>
</html>
Place the span.wsite-logo class directly under the nav tag, after that change the span class in a div class and add a float: left to the class .wsite-logo.
remove logo div class logo med-padding.
Some advice that worked!!
Line 120 of css, in the #navigation, change text align right to center to move it horizontally, or add margin-top: 3%; to move it vertically, or both, or various other combinations.
navigation {
text-align: center;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
float: none;
margin-top: 3%;
I'm very new to all of this and am trying to build this website, but the main image on the page is not centering. I've tried all sorts of centering things but they don't work. Also, the width percentage is ignored too.
I've readjusted margin/padding to 0. don't know what it could be.
css for the picture:
#pictures img{
width:"70%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
}
and the html div that has to do with it:
<div id="pictures">
<img src="img/homepage.png" alt="HomePage"></div>
FULL HTML
<!DOCTTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jacobs Bookeeping</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen">
</head>
<body>
<div class="container clearfix">
<div id="main">
<div id="header">
<img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248">
</div>
<div id="twitter">
<img src="img/twitter.jpg" alt="Twitter">
</div>
<div id="facebook">
<img src="img/facebook.jpg" alt="Facebook">
</div>
<ul class="nav">
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li class="last">Resources</li>
</ul>
<div id="pictures">
<img src="img/homepage.png" alt="HomePage">
</div>
</div>
</div>
<div id="copyright">
<p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — EMAIL JACOBS BOOKKEEPING — CALL 206.861.5664 — © 2013 JACOBS BOOKEEPING    </p>
</div>
</body>
</html>
FULL CSS
html {
margin: 0px;
padding: 0px;
}
body {
font-family:'Futura', sans-serif;
color: #FFFFFF;
font-size: 13;
margin: 0px;
padding: 0px;
}
#main {
border-top: 10px solid #EAE1C9;
border-right: 10px solid #EAE1C9;
border-left: 10px solid #EAE1C9;
padding-bottom: 20px;
background: url('../img/bg-jacobs.jpg') repeat;
background-color:#96B9BF;
}
a {
color: #FFFFFF;
text-decoration: none;
}
#facebook img{
float: right;
padding: 45px 5px 10px 10px;
position: static;
}
#twitter img{
float: right;
padding: 45px 50px 20px 0px;
position: static;
}
#header img {
padding: 40px 0px 0px 40px;
float: left;
position: static;
}
ul.nav {
margin-top: 45px;
list-style: none;
text-transform: uppercase;
float: right;
position: relative;
}
ul.nav li {
margin: 0px 50px 0px 60px;
display: inline;
}
ul.nav li a {
color: #FFFFFF;
}
#pictures img{
width:"80%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
display: block;
text-align: center;
}
#copyright {
text-align: right;
background: #867131;
border-top: 10px solid #EAE1C9;
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
font-size: 10px;
letter-spacing: 2px;
color: white;
}
.container{
width: auto;
margin: 0 auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
Put display: block; on it. By default, images are inline.
To center inline —default for image— or inline-block elements, just center it as text. This means, you will need to use text-algin on the parent element:
div#pictures {
text-align: center;
}
The other solution is the one from #One Trick Pony, and display the image as a block element and just then apply the automatic margin.
#pictures img{
display:block;
}
Add this code then i will be centered
i know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.
You have two options:
Remove img from #pictures and then put the image inside that div.
Add the #pictures to the image Tag in html (inline style).
You might remove the display tag in #pictures.
Good luck with that.