I have got a little problem. I'm building a template with twitter-bootstrap and I got into these two problems. Here you can see my site:
http://jsfiddle.net/e9SGL/embedded/result/ - fullscreen
http://jsfiddle.net/e9SGL/ - small one with code
As you can see the site is not aligned to the center. It is aligned to the right by 5px from the center. I know that it's moved by padding: 5px; but I want to keep that padding because it looks weird without it.
The second problem is that text Mira's Koding. It is on top of #logo div. I want to make it on the bottom of the #logo div. Here is my code:
CSS to bootstrap and my CSS.
<link rel="stylesheet" href="css/wise.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="display">
HTML
<html>
<div class="container-fluid" id="back">
<div class="row-fluid" id="logo">
<div class="span12">Mira's Koding</div>
</div>
<div class="row-fluid" id="menu">
<div class="span12">
<ul class="inline">
<li>Home</li>
<li>My Work</li>
</ul>
</div>
</div>
<div class="row-fluid" id="content">
<div class="span10" id="cleft">
<h3>Example 1</h3>
<p>No need of long text here.</p>
Read more ››
<hr>
<h3>Example 1</h3>
<p>Lorem ipsum...</a>
</div>
<div class="span2" id="cright">
<h3>Author</h3>
<p><i class="icon-envelope"></i> my#mail.com</p>
</div>
</div>
</div>
</html>
wise.css
::selection {
color:#1f7bac;
}
::-moz-selection {
color:#1f7bac;
}
html, body {
background-color: #ebeaea;
overflow: auto;
}
#back {
background-color: #ebeaea;
}
#logo {
background-color: #1f7bac;
border-left: 1px solid #1f7bac;
border-right: 1px solid #1f7bac;
height: 50px;
font-size: 28px;
padding: 5px;
color: white;
}
#menu {
background-color: #fff;
border-left: 1px solid #1f7bac;
border-right: 1px solid #1f7bac;
border-bottom: 1px solid #1f7bac;
padding: 5px;
height: 20px;
margin-bottom: 20px;
}
#content {
background-color: white;
border: 1px solid #1f7bac;
padding: 5px;
}
.footer {
height: 100px;
background-color: #1f7bac;
position:fixed;
bottom:0;
width: 100%;
}
bootstrap.css and bootstrap-responsive.css are not edited. It's default bootstrap CSS.
Thank you very much.
There are probably a number of ways to fix problem #1, but this one does the trick:
.row-fluid {
width: auto;
}
As far as problem #2, I don't see a div with ID 'header', but it looks to me like you simply need to move #logo below #menu.
Edit: I see a div#head. Maybe that's what you meant. However, in Firefox #logo is below #head. Please clarify.
Edit again: You could do this:
#logo {position: relative;}
#logo > div {position: absolute; bottom: 0;}
Again, you have plenty of options.
Remove all confusion and unnecessary codes, just place
.container, .container-fluid {margin: 0 auto;}
This code will align your page to center.
Your second problem is very easy, just dive into css.
Hope it helps.
Related
I am trying to code a basic HTML navigation header for fun and teach myself some CSS/HTML but I cannot get things to arrange in the way I had intended.
I would like to have a logo on the far left, some links to pages in the middle and a user icon on the right, here is a moc idea:
This is the result of butchering code together :(
I think for my idea to work I need to create 3 element locations inside one overall container.
Something like this but I can't seem to find a efficient way of doing so:
This is my current CSS code:
html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}
body {
background-color: #FFF;
}
.topnav-logo{
float:left;
background-color: #f8f8ff;
margin: 0;
padding: 0;
}
.topnav-profile{
float:right;
background-color: #f8f8ff;
}
.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
line-height: 110px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}
and the HMTL to go with it currently looks like this:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a>
</ul>
body content
</body>
Thanks for the length read and any help is appreciated :)
Edit: So many great replies, thanks all! Sorry for the late feed-back, NYE distractions :(
Just for clarification, I am not looking to put physical visable lines between the logo, links and the profile. I am only using those images as a demonstration as to where I would like each element container. I am looking to align the link text and the profile image as follows:
Links: vertical middle, horizontal middle
Profile img: vertical middle, horizontal right.
Since you're doing for fun i think this is simplest as it gets :)
I didnt do all the tweaking for perfect layout but here is what i think you wanted.
Simply make 3 inline blocks give them text-align:left , center and right and width 33% approx ( including Borders and stuffs) so they take nett 33% each block.
UPDATE for vertical alignment .
div{
display: inline-block;
width:32%;
height: 50px;
line-height:50px;
background-color: pink;
}
.left{
text-align: left;
}
.middle{
text-align: center;
}
.right{
text-align: right;
}
<div class="left">
<span>Logo here on far left</span>
</div>
<div class="middle">
<span>link1</span>
<span>link2</span>
<span>link3</span>
</div>
<div class="right">
<span>User Icon on far right</span>
</div>
Please try this:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<div class="header">
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
</ul>
</div>
body content
</body>
</html>
Here is css:
html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}
body {
background-color: #FFF;
}
.header{
display:inline-block;
}
.topnav-logo{
background-color: #f8f8ff;
margin: 0;
padding: 0;
}
.topnav-profile{
background-color: #f8f8ff;
}
.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
}
ul.topnav li a {
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}
Give necessary padding and margin.
Try this -
Make a container like structure with 3 divs aligned in the same line for Top navigation. You have 2 options to align - (i) use display:inline-block or (ii) float
<div class="container">
<div class="nav-container">
<div class="left">
<a>
<img width="100" height="100" src="https://cdn2.iconfinder.com/data/icons/social-media-8/512/image3.png" alt="site-logo"></a>
</div>
<div class="mid">
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="right">
<a class="topnav-profile" href="index.html"><img width="100" height="100" src="http://www.aspirehire.co.uk/aspirehire-co-uk/_img/profile.svg" alt="user profile"></a>
</div>
</div>
</div>
CSS -
.container {
position:relative;
width:80%;
margin:0 auto;
border:1px solid #cccccc;
}
.nav-container {
border:1px solid #cccccc;
height:100px;
}
.left {
float:left;
border:1px solid #cccccc;
width:20%;
height:100%;
}
.mid {
float:left;
border:1px solid #cccccc;
width:59%;
height:100%;
}
.right {
float:right;
width:20%;
height:100%;
border:1px solid #cccccc;
}
See Fiddle
the your super close to the way I usually handle that. If you put your entire nav-bar in a div tag or even better a nav tag and give it an appropriate class name, then you can style it much easier.
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<nav class="primaryNav">
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
</ul>
</nav>
body content
</body>
CSS
.primaryNav{
height: whatever;
width: whatever:
}
.primaryNav ul{
list-style:none;
width: whatever;
float: right
}
.primaryNav li{
display:inline-block;
margin:I usually give a margin here;
}
.primaryNav a{
padding:10px;
}
something like this. I also closed your a tag in an li if you want to control just that one you can also use .primaryNav li:nth-last-child(1)
also about that image you have there, check out Font Awesome, they have tons of easy to use icons, you can use their cdn, or get the whole css file. It can be deff be fun to play with.
Check this out, similar to what you want.
It is based on the moc idea image you provided.
Use it as a guide.
#main{
width: 99%
height: 700px;
border: 1px solid grey;
}
#content{
width: 90%;
height: inherit;
border-right: 1px solid grey;
border-left: 1px solid grey;
margin: 0 auto ;
}
#header{
width: 100%;
border-bottom: 1px solid grey;
height: 80px;
}
.logo{
width: 20%;
height: inherit;
float: left;
border-right: 1px solid grey;
}
.logo img{
max-width: 80px;
max-height: 80px;
padding: 5px;
}
.nav{
width: 50%;
float: left;
margin-right: 5px;
padding: 5px;
}
.icon{
width: 20%;
float: left;
margin-left: 5px;
padding: 5px;
}
.icon img{
max-width: 60px;
max-height: 60px;
}
.nav ul li{
display: inline;
text-decoration: none;
padding: 5px;
border: 1px dashed orangered;
margin: 5px;
}
.text p{
padding: 10px 10px 0;
}
<body>
<div id="main">
<div id="content">
<div id="header">
<div class="logo">
<img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg" alt="Image" />
</div>
<div class="nav">
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<div class="icon">
<img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1477218723/images_a0xbmx.png" alt="icon" />
</div>
</div>
<div class="text">
<p>
What is Stick Checking?
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity.
Sporting Charts explains Stick Checking
Stick checking is a defensive move where a player will stop the puck carrier's progression by knocking the puck off of their stick and out of their possession. It's often done when the defender isn't in a position to stop the attacker by using their body. Stick checking has been used in hockey since day one. There are several variations of the move, such as the poke, tap, sweep, and press check. Another common stick check is lifting the opponent's stick while they're in possession of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance.
</p>
<p>
What is Stick Checking?
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity.
Sporting Charts explains Stick Checking
Stick checking is a defensive move where a player will stop ion of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance.
</p>
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html {
height:100%;
background-color: gold;
min-width: 800px;
max-width: 1000px;
margin: auto;}
body {
background-color: #ddd;}
.topnav-logo{
float:left;
background-color: red;
margin: 0;
padding: 0;
width:calc(10% - 2*1px);height:110px;
border:1px solid}
.topnav-profile{
float:right;
background-color: pink;
width:calc(10% - 2*1px);height:110px;
border:1px solid}
.topnav{
margin: 0;
padding: 0;
width: 80%;}
ul {
list-style-type: none;
overflow: hidden;}
/* Float the list items side by side */
.topnav li {
float: left;border:1px solid;
margin-right:.5em;
line-height: 110px;
width:calc(100% /3 - 1*.5em - 2*1px)}
/* Style the links inside the list items */
.topnav li a {
color: RGB(120,200,250);
text-decoration: none;
transition: 0.3s;
font-size: 30px;}
</style>
</head>
<body>
<header>
<div class="topnav-profile">
<img src="images/profile.png" alt="user profile"></div>
<div class="topnav-logo">
<img src="images/logo.jpg" alt="site-logo"></div>
<nav>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</header>
<div>2 logos: user profile must be first to float right . Each logo has width:calc(10% - 2*1px)*2, and the nav element:width:calc(100% / the number of links you want - 1*.5em -margin-- -2*1px --border--). See in codepen </div>
</body>
when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />
I'm learning html, css and php.
I created this structure with header, menu(left), content(right) and footer.
Inside 'right' has a php form.
When user send form to server, the server answers with a table.
This table can be bigger than 'left' height.
In this way left and right are at different heights.
HTML STRUCTURE:
<div class="header">
<h1>AGENDA ELETRÔNICA</h1>
</div>
<div class="container">
<div class="left">
<ul>
<ol><a class="menu" href="index.php">Home</a></ol>
<ol><a class="menu" href="cadastrar_pessoas.php">Cadastrar</a></ol>
<ol><a class="menu" href="buscar_pessoas.php">Buscar</a></ol>
<ol><a class="menu" href="gerenciamento.php">Alterar</a></ol>
</ul>
</div>
<div class="right">
FORM PHP
</div>
</div>
<div class="footer">
<small><a class="rodape" href="">Sobre</a></small>
<small> || </small>
<small><a class="rodape" href="">Contato</a></small>
<small> || </small>
<small><a class="rodape" href="">Ajuda</a></small>
</div>
AND CSS STRUCTURE UNTIL NOW:
.container{
}
.header, .footer{
text-align: center;
background-color: #777;
color: white;
border-style: dotted;
border-width: 1px;
border-color: black;
width: 100%;
}
.footer{
text-align: center;
line-height: 100%;
float: left;
height: 5%;
margin-bottom: 3px;
}
.left{
border-style: dotted;
border-width: 1px;
border-color: black;
background-color: #CCC;
float: left;
width: 11%;
min-height: 500px;
margin: 2px 0px 2px 0px;
padding: 0px 0px 0px 0px;
height: 100%;
}
.right{
border-style: dotted;
border-width: 1px;
border-color: black;
width: 88%;
float: right;
min-height: 500px;
margin: 2px -2px 2px 8px;
padding: 0px 0px 0px 0px;
height: 100%;
}
I tried many solutions in stackoverflow and othes sites, but i couldn't transform to my needs.
Can anyone help me?
If I understand your question correctly, you want the left and the right divs to always be the same height, and the content in the right div is not always known.
Here's a table-free CSS solution: http://jsfiddle.net/panchroma/Hxh9x/
I have added a large padding and an equally large negative margin to the left and right divs, then the container div which wraps around them both has overflow hidden.
CSS
.left{
padding-bottom: 99999px;
margin-bottom: -99999px;
/* more stuff */
}
.right{
padding-bottom: 99999px;
margin-bottom: -99999px;
/* more stuff */
}
.container{
overflow: hidden;
}
HTML
<div class="header">
</div> <!-- end header -->
<div class="container">
<div class="left">
</div> <!-- end left -->
<div class="right">
</div> <!-- end right -->
</div> <!-- end container -->
<div class="footer">
</div> <!-- end footer -->
This technique works well cross-browser as well.
For simplicity I commented out some of your extra CSS. In this example I also removed your borders around these divs. Remember that borders acutally add extra width to the div, and so this can throw your width calculations off. If you need borders, check out the the box-sizing: border-box method which forces the border inside your div.
Hope this helps!
I cannot see any problem with having different heights, but I would suggest you use tables; in this case:
<div id="header">...</div>
<table width="100%">
<tr>
<td valign="top id="left">....</td>
<td valign="top id="right">....</td>
</tr>
</table>
<div id="footer">...<.div>
In this way both 'sides' will have the same height.
I have created two rounded corner boxes which i would like to be aligned next to each other .But the 2nd box is appearing directly below the first one inspite of me using float:left on the 1st one. Any way to fix this would be really helpful. Below are the html and the css.
The HTML :
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="layout.css"/>
</head>
<body>
<div id="containerDiv">
<!-- Box 1 -->
<div id="box1" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
<!-- Box 2 -->
<div id="box2" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
</div>
</body>
</html>
The CSS :
#containerDiv {
width: 1000px;
}
.boxDiv {
width: 248px;
}
.upperRound {
background-image: url('rounded_upper.gif');
height: 20px;
}
.lowerRound {
background-image: url('rounded_lower.gif');
height: 20px;
}
.boxContent,.boxTagLine {
border-left: 2px solid #B5B5B5;
border-right: 2px solid #B5B5B5;
padding: 10px;
background-color:#F8F8F8;
solid #B5B5B5;
}
.boxTagLine {
color:#0066FF;
}
#box1 {
float:left;
}
Second div must float to right and next element should clear float. I'll add more info in a second.
I was a bit wrong. You even don't need clearing div.
Check out this question.
So - in your case, add this to css=>
#box2 {
float:right;
}
#containerDiv {
width: 1000px;
overflow: hidden;
}
I didn't try it, but it should work.
Mine approach will leave space between boxes. So - it might be not desired effect.
You would be better off using spans
But if you have to use divs :
.boxDiv {
width: 248px;
display: inline;
}
float both boxes left:
#box1,#box2 {
float:left;
}
You'd be better off floating your .boxDiv left, like so:
.boxDiv {
width: 248px;
float: left;
}
That way if you add more boxes they'll float straight away, otherwise you'd have add the specific class names:
#box1, #box2, #box3, #box4 {
float:left;
}
I have a layout with header, footer, body content. It is a pretty standard layout. We have reports that sometimes extend past the hard coded width' But we need the left nav and the body content to the same line. With this HTML code below, if the width extends too far (say there is a content in the body that has more than 900+ width) then the body content flows below the left nav.
Basically, we want the content and left nav to remain on the same row regardless how much content is actually in that body content section. Is there a way to force the browser to keep those to items on the same row ALWAYS.
<html>
<head>
<title>Test</title>
<style type="text/css">
#bodyFull {
}
#header {
border: 3px solid #f00;
background-color: #99F;
width: 900px;
}
#footer {
border: 3px solid #909;
background-color: #F99;
width: 900px;
}
#leftNav {
float: left;
width: 150px;
height: 800px;
border: 2px solid #777;
background-color: #FF9;
}
#bodyContent {
float: left;
border: 2px solid #707;
background-color: #AAA;
width: 1024px;
height: 1024px;
overflow: hidden
}
#mainBody {
width: 920px;
}
</style>
</head>
<body>
<div id="bodyFull">
<div id="header">
The Header
</div>
<div id="mainBody">
<div id="leftNav">
Left Nav
</div>
<div id="bodyContent">
The Body
</div>
The End of Main Body
</div>
<div style="clear: both"></div>
<div id="footer">
The Footer
</div>
</div>
</body>
</html>
Small typo: bodyContent to rest at the same row as the leftNav.
/* !!! CAN THIS SECTION REMAIN ON THE SAME ROW AS THE LEFT Nav, EVEN THOUGH IT EXTENDS PAST THE 'HEADER/BODYFULL' width
*/
Ok, forget my margin-left suggestion, misunderstood the problem. If you want to make sure that div is always, say, 750px (so that plus the left nav is the same width as the header) then set its width to 750px and set either overflow: auto to add a scrollbar on that part of the page where necessary, or overflow: hidden to just truncate it.
Scratch what I said before, I misunderstood you. Try out the code below and let me know if it is what you are looking for. Otherwise you are going to need be more specific what you need. However you might want to check out this liquid layout and then put a wrapper div around it with a set width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#bodyFull {
}
#header {
border: 3px solid #f00;
background-color: #99F;
width: 900px;
}
#footer {
border: 3px solid #909;
background-color: #F99;
width: 900px;
}
#leftNav {
float: left;
width: 150px;
height: 800px;
border: 2px solid #777;
background-color: #FF9;
}
#bodyContent {
float: left;
border: 2px solid #707;
background-color: #AAA;
width:748px;
height: 1024px;
overfloat:auto;
}
#mainBody {
width:906px;
overfloat: auto;
}
</style>
</head>
<body>
<div id="bodyFull">
<div id="header">
The Header
</div>
<div id="mainBody">
<div id="leftNav">
Left Nav
</div>
<div id="bodyContent">
The Body
</div>
The End of Main Body
</div>
<div style="clear: both"></div>
<div id="footer">
The Footer
</div>
</div>
</body>