Hello i seem to be having a little trouble doing the simplest of tasks tonight. Trying to make my primary-menu float to the right of my site site-name.
<header>
<div id="header">
<div class="g3">
<h1 id="site-name">
</div>
</div>
<div class="cf"></div>
</header>
<nav>
<div id="primary-menu" class="g3 nav">
<ul id="main-menu" class="menu links clearfix">
</div>
</nav>
<div class="cf"></div>
I dont know if i should be pasting in CSS code to help ut there seems too much from what i can gather. Your welcome to pop in and have a look. dont mind the mess.
Thanks
Add this style to header tag:
header {
width: 110px;
float: left;
}
and this to your nav:
nav {
float: left;
width: 800px;
margin: 10px;
}
Related
I have a question about this: https://gyazo.com/1851299f16c3148c81f8e83682d38ff1
https://gyazo.com/05adf6012ba98bbae93ecda4dabbdffa
It can be a stupid question or just a stupid code. But how can i get that long block away? My logo is scaled and correct. But if i delete that long div block, then the logo unscaled, and be big.
Need advice.
Thankyou!
I created a few examples on jsfiddle for you.
1)
To get rid of the black bar you could do something like this:
<div class="wrapper">
<div class="Logo">
<img class="LogoNav" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/9front_logo.svg/150px-9front_logo.svg.png">
</div>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>bestellen</li>
</div>
example:
https://jsfiddle.net/x4912b7s/1/
2)
To move the links to the right of the logo, but still inside the black box:
.LogoNav {
width: 25%;
height: auto;
float: left;
}
example: https://jsfiddle.net/x4912b7s/2/
3) To remove the black box and move the links next to the logo:
html
<div class="wrapper">
<div class="Logo">
<img class="LogoNav" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/9front_logo.svg/150px-9front_logo.svg.png">
</div>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>bestellen</li>
</div>
css
.LogoNav {
width: 25%;
height: auto;
float: left;
}
example: https://jsfiddle.net/x4912b7s/3/
Hopefully this helps.
I am not a front-end developer so I suspect I might be missing something really basic. Nevertheless I cannot figure out a solution.
I have a div element and I simply want to apply some padding at the top so that it does't interfere with the heading. I have looked around and I have seen similar problems with margin collapsing but I don't think it's the case since here I am dealing with two separate div not enclosing each other (tot-header and content).This is what I have written so far.
<!DOCTYPE html>
<html>
<head>
<title>Blogologo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="css/head.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
and the css
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
However the padding seems not to work. Any ideas?
What browser are you using? From what I can see it seems to be working perfectly. There is a huge space between the two divs caused by the padding-top of the .content div. That is until your scroll, because your top header has a fixed position.
This is your code:
http://codepen.io/anon/pen/WweMPG?editors=1100
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li>Home</li>
<li>Racconti</li>
<li>Rubriche</li>
<li>Pesce fritto e baccalà</li>
</ul>
</div>
</div>
</div>
</div>
The code appears to me to be working perfectly. What did you expect it to look like?
remove
position:fixed;
and change your .content css
from padding-top:10cm; to padding-top:10px;
in your css you can try using pixels instead of cm e.g.
.content {
padding-top: 100px;
}
Also you may try using margin instead of padding e.g.
.content {
margin-top: 100px;
}
And give it more padding or margin untill your content appears
So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a responsive design I have to swap the <nav> and the date <div> when on smaller screen resolutions.
I have read around S.O and I have seen several fixes using CSS for swapping 2 <div>s but I cannot get them to work with my code. I have no idea how to get around this to be honest and all the help is really appreciated. Here's the code snippet:
<header>
<div id="logo">
<img src="images/logo.png" title="Site Name" alt="logo">
</div>
<nav>
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
<li>From-To</li>
</ul>
</nav>
</header>
<div id="date">
<p>Monday 09/03/15 16:16</p>
</div>
Edit:
As requested here's the fix I tried to implement but in vain.
HTML
<div class="swapHack">
<header>
<div id="logo">
<img src="images/logo.png" title="Site Name" alt="logo">
</div>
<nav>
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
<li>From-To</li>
</ul>
</nav>
</header>
<div id="date">
<p>Monday 09/03/15 16:16</p>
</div>
</div>
CSS
.swapHack{
display:table;
width: 100%;
}
.#date {
display: table-header-group;
}
.nav {
display: table-footer-group;
}
Thanks.
The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css.
.swapHack{
display:table;
width: 100%;
}
#date {
display: table-header-group;
}
nav {
display: table-footer-group;
}
<div class="swapHack>"
<header>
<div id="logo">
<img src="images/logo.png" title="Site Name" alt="logo" />
</div>
<nav>
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
<li>From-To</li>
</ul>
</nav>
</header>
<div id="date">
<p>Monday 09/03/15 16:16</p>
</div>
</div>
I'm trying to make an interactive google map page but I'm having a bit of trouble layering the divs.
My html looks something like this
<body>
<div class="wrapper">
<div class="header">
<p class="logo"> Put a logo here later </p>
</div>
<div class="nav">
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<div class="content">
<div class="main">
<h1>Google Maps</h1>
<div id="map"></div>
</div>
</div>
<div class="footer">
<p> Put a footer down here later </p>
</div>
</div>
and the related css looks like this
#map{
position: absolute;
overflow: hidden;
left: 0px; top: 0px;
height: 100%;
width: 100%;
z-index: 0;
}
.nav{
background-color: #fff;
width: 120px;
height: 500px;
z-index: 100;
}
What happens at the moment is the map takes the entire page (intentional) but I want the nav bar to float on top somehow. Any help would be appreciated. Thanks!
Simply add position:absolute; to your .nav
jsBin demo
that was to answer your last question (float nav bar on top of map somehow).
If you want everything to be over the map... do it this way:
<body>
<div id="map"></div>
<div id="everythingElse"><!--all other content--></div>
</body>
setting #everythingElse also to position: absolute;
Example: http://jsbin.com/xanen/3/edit
Hello i have a problem with a left hand side affixed block region on my theme. The #content in this code slips down to the left of the sidebar first affixed block.
<body class="html not-front logged-in two-sidebars page-node page-node- page-node-616 node-type-group og-context og-context-node og-context-node-616">
<div id="navbar" class="navbar navbar-medium navbar-inverse navbar-fixed-top">
<div id="main">
<div class="container">
<div class="row-toggle row-fluid">
<aside id="sidebar-first" class="sidebar span2 hidden-phone">
<div class="region region-sidebar-first">
<div class="region region-sidebar-first-affix affix" style="width: 145px;">
</aside>
<div id="containerr">
<section id="content" class="span6">
<div class="region region-content">
</section>
<aside id="sidebar-second" class="sidebar span4 hidden-phone">
</div>
</div>
</div>
<footer id="footer" class="container-wrapper">
<div id="sb-container">
</body>
CSS that i think affects it all is -
#sidebar-first > .region {
background: none repeat scroll 0 0 #0A0A0A;
margin-right: 10px;
padding: 10px 15px;
}
.region-sidebar-first-affix.affix {
top: 20px;
}
.region-sidebar-first-affix.affix {
top: 55px !important;
}
.affix {
position: fixed;
}
You can view the code on this page if needs be not a spam link as im deletin this domain soon
All pointers much appreciated as it seems to be just a little outwith my CSS and Html knowledge.
Thanks
Your snippet of code is missing several closing tags and doesn't really illustrate the problem with your page.
I was able to correct the display on your page by changing the css for section#content.
You could write your css like so:
section#content {
margin-left:19.5%;
width: 54%
}