I'm a bootstrap 3 newbie, so please be gentle with me :) I know i'm going completely down the wrong route here. I've tried several approaches, this was just the latest. I've searched for bootstrap 3 websites doing the same thing, so i could learn from them, but can find any (some similar) but not with the big logo)
All I want is a big logo on the left taking up the full height of my header (about 100px) then small menu top right Contact us | Blog | Apply and main menu center bottom of the header space (but not under the logo) starting next to it (ideally centered) with 5 menu options. I tried to add a picture but it wont let me.
heres what I have : `
<style>
.smallmenu {
color: white;
background-color: #003300;
padding-right: 20px;
float: right;
font-size: 12px;
line-height: 50px;
}
.mainmenu {
background-color: #0000cc;
color: white;
padding-left: 200px;
float: right;
line-height: 30px;
font-size: 16px;
}
.logo {
background-color: #f11f18;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 logo">
<img src="img/logo_en2.png" alt="logo">
</div>
<div class="smallmenu">
<ul class="list-inline">
<li> Contact Us</li>
<li> Apply Now</li>
<li> Blog</li>
</ul>
</div>
<div class="col-lg-10 mainmenu">
<ul class="list-inline">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
</div>
</div>
`
the coloured backgrounds are just to help me see where things go.
Of course as soon as I resize this, it falls apart. if someone could point me in the right direction.. with how the structure should be.. should I use navbars? should I be using col-xx-xx or not in a header? is it just one row, or should it be 2?
I guess on mobile it should have logo and small top menu and the main menu should be stacked.
Really appreciate any help with structure, site to look at or code samples I can learn from.
Thanks
First bit of advice I would give is start with the broad layout - where all the stuff on the screen is going to go - before you get down to trying to style menus etc. because you never know when inheritance is going to break something.
Is this (fiddle) basically what you're looking fro?
The key concept is:
<div class="row">
<div class="col"></div>
<div class="col">
<div class="row"></div>
<div class="row"></div>
</div>
</div>
Related
I'm trying to write my new webpage. On the top I want to have one center div called top-bar-container, with three other div's something like that :
<div id="top-bar-container">
<div id="top-main-menu-container">
<ul id="main-menu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
<div id="logo-placeholder">
<img src="images/logo.png" width="300" height="75">
</div>
<div id="mail-login-container">
</div>
</div>
When trying to get the effect of a div to the left was always on the extreme left, right, to the right and the logo was always in the middle. I like to use position: absolute but this reluctance. I have to deal differently. Is anyone able to help me get this effect?
Here's one way of doing it.
#top-bar-container > div {
float: left;
}
You can float the links left, then float the mail container right. Apply a text-align center to the parent div and everything should be fine.
#top-bar-container {
text-align: center;
}
#top-main-menu-container {
float:left;
}
#mail-login-container {
float:right;
}
Fiddle here:
http://jsfiddle.net/3eut86s6/
I'm using the Pure CSS framework and my code looks like
<div class="container pure-g">
<header class='pure-u-1'>
<h1 class='logo'>
TEST
</h1>
<nav class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li>Example Link 1</li>
<li>Example Link 2</li>
</ul>
</nav>
</header>
</div>
Here's a JSfiddle: http://jsfiddle.net/ME4jv/
What I'm trying to do is line up the logo (to be floated left) with the navigation links (floated right), but both floating and the grid system aren't working.
Unfortunately you need to override the framework width declaration that has been assigned to the nav. Currently it is set to 100%;. This is why it is not floating up.
DEMO http://jsfiddle.net/ME4jv/2/
.pure-menu.pure-menu-open {
float:right;
display: block;
width: auto;
}
I got a problem with my footer background. It seems like the height of the #pagefooter is 0 and the background color is only applied to the padding, vertical which 2x 25px.
I tried several things, but i didn't find a solution.
What's wrong here?
///THE HTML
<div id="pagefooter">
<footer>
<nav id="f1" class="footernav">
<h1>Misc</h1>
</br>
<ul>
<li>
Lorem
</li>
<li>
ipsum
<li>
<li>
dolor
</li>
<li>
sit
</li>
<li>
amet
</li>
</ul>
</nav>
<nav id="f2" class="footernav">
<!-- SOME MENU -->
</nav>
<nav id="f3" class="footernav">
<!-- SOME MENU -->
</nav>
<nav id="f4" class="footernav">
<!-- SOME MENU -->
</nav>
</footer>
</div>
///THE CSS
#pagefooter {
background-color: #1a1a1a;
padding:25px 100px;
}
.footernav {
float:left;
width:25%;
margin-bottom: 35px;
}
Here's an example: http://jsfiddle.net/AR3AC/
Basically, #pagefooter contains only floated elements which make the parent element have no height (and therefore no background colour). To work around this, set the overflow property to auto:
#pagefooter {
background-color: #1a1a1a;
padding: 25px 100px;
overflow: auto;
}
The height of the pagefooter is never set as far as I can tell. Add a line into #pagefooter so like this to explicitly state the height you want:
#pagefooter {
background-color: #aaa;
height: 100px;
padding:25px 100px;
}
I'm not sure if that answers your question, but that's a good place to start.
Now and then I'll get an issue with overflow:auto. In case you do, another way to deal with this is to put an empty clearing div right before . It can just be <div style="clear:both"></div>. (I generally make a class ".clear" which has clear:both. Makes it easy to troubleshoot this sort of thing by just testing with a <div class="clear"></div> to see if floats are the issue.
I have a <table> and I put more than 6 <div>s in one td then I change the display:inline to show these <div>s inside together.
But it just show at most 5 <div>s in first line and show others in in another line below of first line!
where is wrong?
This is my code:
<tr>
<td>
<div id="navigation"> Home </div>
<div id="navigation"> Item1</div>
<div id="navigation"> Item2 </div>
<div id="navigation"> Item3</div>
<div id="navigation"> Item4 </div>
<div id="navigation"> Item5 </div>
<div id="navigation"> Item 6 </div>
<div id="navigation"> Item 7</div>
</td >
</tr>
CSS Code:
#navigation{
display:inline;
padding:0px 10px 0px 10px;
}
this is design view:
You are using table for layout, use div's instead, ya, surely it won't throw you any error but what you are doing is semantically not correct...
The correct way and a better way to have this is as an unordered list, with display: inline-block; CSS property
<ul>
<li>Demo 1</li>
<li>Demo 2</li>
<li>Demo 3</li>
<li>Demo 4</li>
<li>Demo 5</li>
</ul>
ul li {
display: inline-block;
}
You can also wrap the ul inside an nav which is HTML5 element to provide it a meaning that yes, this is a navigation, you'll be probably nesting a element inside the holder so using display: block; for a element will make sense
First off you can't have multiple elements with the same ID. Change id="navigation" to class="navigation" on the elements.
Secondly you can then use this CSS:
.navigation
{
display: inline-block;
}
This will make those elements all appear in a row.
Because there is no fixed table width, the tables maximum width is the window width.
See this fiddle:
http://jsfiddle.net/7QLPW/1/
One Table with specified width and one without
<table width="500px">
...
<table>
The first one does not break as soon as the window width gets too small, the second one does.
What is the width of your table, full layout or how many column you have.
you can see what I try for your issue
http://fiddle.jshell.net/yNF4n/
I'm starting with Bootstrap and have a small problem with the navbar-element. I need to declare a container with the width of 1024px and have to add two navbars. On at the top and the other one below it. Both navbars need a distance from the right div of 0px.
(Stackoverflow doesn't want to let me post pictures, but I think it's much more easier if you can see what I mean: http://www.abload.de/img/asdjraik.png)
As you can see the first navbar is working correctly, but now I need another one below it. Padding from the container under it should be exactly 5px.
My problem is, that the other navbar gains the same padding from the top as the first navbar. I can't get it below the other one. When I define the following classes for this problem another one comes up:
.small-margin {
margin-top: 20px;
}
.big-margin {
margin-top: 110px;
}
My HTML looks like this:
<div class="navbar small-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="navbar big-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>another link 1</li>
<li>another link 2</li>
</ul>
</div>
</div>
</div>
The second navbar appears on the left side of the first navbar and not below it. I tried a lot of CSS-fixes.
Anyone have a idea how to get the 2nd navbar below the first?
Thanks in advance!
I've tried your code and it's works
I also tried adding it into 1024px container
.container{
max-width: 1024px;
}
this is the result
Your css code must be conflicted with the bootstrap. maybe you could try wrapping each navbar with .row. I believe that this solution is surely make all navbar separated.
<div class="row-fluid">
<div class="span12">
... navbar 1 ...
</div>
</div>
<div class="row-fluid">
<div class="span12">
... navbar 2 ...
</div>
</div>