I have a style and an index. I want to display a logo and a text in the same line but I can't. It display in a different line.
Here is the code:
index.php
<body>
<div id="headerbar">
Hello World
</div>
<div id="mainmenu-bar">
<div id="mainmenu-content">
<img src="http://www.conceptcupboard.com/resource-centre/wp-content/uploads/2013/04/recycle-logo.gif" height="75" width="75" style="margin-top:5px;">
<h1>Text that I don't see, because is down</h1>
</div>
</div>
<div id="content">
<h1 color="white">Hello World</h1>
</div>
</body>
and layout.css
#font-face{font-family: Maven Pro; src: url(../fonts/MavenPro-Regular.ttf);}
body{font-family:Maven Pro; background:#ECECEC; border:0; font-size:100%; vertical-align:baseline; margin:0; padding:0;}
#headerbar{height:30px; float:right; margin-right:20px; margin-top:5px;}
#mainmenu-bar{background:#4C84BC; width:100%; height:90px; overflow: hidden;}
#mainmenu-content{margin: 0 auto; width:1000px;}
You can test it here: http://jsfiddle.net/6WYk4/
Is Because you dont have inline-block the h1 , by default it display as block. try this:
#mainmenu-bar h1{
display:inline-block;
}
full example with vertical align:
http://jsfiddle.net/6WYk4/3/
<h1> is a block level element. Use a span instead :)
The reason they are not side by side is because they are block level elements. You need to add a float.
Also, inline styles are bad habits.
<img src="http://www.conceptcupboard.com/resource-centre/wp-content/uploads/2013/04/recycle-logo.gif" class="derp" />
<style type="text/css">
.derp {
height:75px;
width:75px;
margin-top:5px;
float:left;
}
</style>
Try this fiddle: http://jsfiddle.net/WurrZ/
#mainmenu-content img {float:left;}
#mainmenu-content h1 {float:left; width:600px;}
#content {clear:both;}
The image and the h1 need floats and the content needs to be cleared.
Add float:left; to the img's css
Related
Why does my code creates this wied spaces between divs.
HTML:
<div id="container">
<div id="header">
<p class="header_title">Theme Preview</p>
<p class="header_quote">Previewing Another Blog</p>
</div>
<div id="menu">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="post">
<p class="post_title"></p>
<hr />
<p> <span class="post_date"></span> <span class="post_autor"></span> </p>
<div class="post_content">
</div>
<hr class="post_final" />
</div>
<div id="footer">
<p>Design by</p>
</div>
</div>
CSS:
body {
width:100%;
background-color:#C1C8D0;
height:auto;
}
#container {
margin:auto;
max-width:1600px;
width:100%;
height:auto;
}
#header {
background-color:#1B1C1E;
width:100%;
height:auto;
text-align:center;
}
.header_title {
padding-top:5%;
color:white;
font-family:Agency FB;
font-size:5em;
text-align:center;
}
.header_quote {
color:#EBEBEB;
font-family:Agency FB;
font-size:1em;
text-align:center;
padding-bottom:5%;
}
#menu {
background-color:white;
}
I already looked the CSS and I did not wrote any margin or something related to crate blank spaces.
I think it the p tag
p{margin: 0;}
It seems like you are not resetting the CSS, so each browser may render the CSS differently. To avoid that, I recommend to use a CSS reset file which need to be included before all CSS files. This file resets all the styles which may be applied by different browsers to a consistent baseline.
As a "hot-fix" you can still do this, but as mentioned it's more common to use a CSS reset.
Add margin: 0; to .header_quote and add following CSS rule
#menu > ul{
margin: 0;
}
Fiddle
i have a stack right now when i explore HTML5 and CSS3 , i try to create a expand and collapse menu but i have problem when menu pull down a border bottom from css3 not pull down too, how can i solve it?
i post my code for you can easy to see and correct for me, tks!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
$(function() {
$('#MainMenu').click(function(){
$('.sub').slideToggle();
});
});
</script>
<title>Admin Control Panel - TBB Rocking Crew</title>
</head>
<body>
<div id="dHeader">
<header> </header>
</div>
<div id="dBody">
<aside>
<article class="asideBoxTitle"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </article>
<article class="asideBoxTitle"> <a href="#"> <img src="img/world.png" class="ico"/>
<ul id="menu">
<li id="MainMenu" class="asideTitle">WorldWide</li>
<li class="sub">Chapterz</li>
<li class="sub">Memberz</li>
</ul>
</a> </article>
<article class="asideBoxTitle"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </article>
</aside>
<!-- end aside-->
<section> </section>
</div>
</body>
</html>
==============================
#charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
aside{
width:240px;
background:#f5f5f5;
position:absolute;
top: 58px;
bottom:0;
border-right-width:1px;
border-right-style:solid;
border-right-color:#e2e2e2;
}
.asideBoxTitle{
height:40px;
line-height:40px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.asideBoxTitle a{
text-decoration:none;
float:left;
}
.asideTitle{
color:#000;
text-decoration:none;
margin-left:20px;
margin-top:-10px;
vertical-align:middle;
}
.asideBoxTitle ul{
display:inline-table;
list-style-type: none;
margin: 0;
padding: 0;
cursor:pointer;
}
.sub{
display:none;
color:#000;
text-decoration:none;
margin-left:20px;
vertical-align:middle;
}
.sub:after{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.ico{
vertical-align:text-top;
margin-left:10px;
}
#dHeader{
background:#20638f;
height:58px;
width:100%;
}
The problem is that you're specifying the height of each item at 40px. They must stay at 40px. They won't move. You are currently making the <a> tags move dynamically, and that will work, but just for the stuff inside the <a> tags; the parent object won't be affected.
A simple way to solve this is to simply set the height attribute of the <article class="asideBoxTitle"> elements to be a min-height instead and remove the float properties from the child <a> tags so that they affect the position of their parent's next sibling. Like so:
.asideBoxTitle{
min-height:40px;
line-height:40px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.asideBoxTitle a{
text-decoration:none;
}
Here's a JSFiddle. Regards.
My first square is made with div tags and the second one is with ID which I named #blacksquare2. The second square which is #blacksquare2 seems to always keep aligning at the bottom with my first square and can't bring it up to the page.Also the words 'i'm lovin' it' seem to be separate from each other. If it helps, I'm trying to achieve something like the McDonald's Website, just for practice.
CSS:
div{
height:90px;
width:96px;
background-color:#CC0000;
border-radius:4px;
text-align:center;
margin-left:132px;
}
#blacksquare2{
height:25px;
width:200px;
background-color:#000000;
text-align:left;
margin:1px 10px 10px 10px
}
#blacksquare2 a{
color:#E6E600;
font-size:11px;
font-family:Arial;
margin:25px
}
span{
font-size:50px;
text-decoration:none;
font-family:Arial;
color:#E6E600;
font-weight:Arial;
margin-left:10px;
}
a{
text-decoration:none;
font-size:13px;
margin-right:10px;
color:white;
font-family:Arial bold;
}
l{
font-size:8px
}
body{
margin-top:0px
}
HTML:
<!DOCTYPE html>
<head>
<title>Home :: McDonalds.com</title>
<link rel="stylesheet"; type="text/css"; href="McDonald'sPrac.css">
</head>
<body>
<div>
<span>M</span>i'm lovin' it<l>™</l>
</div>
<div id="blacksquare2">
<a href="http://www.mcdonalds.com/us/en/home.html#">Home<a>
</div>
</body>
</html>
Element div takes up all the available horizontal space by default.
You can use span instead of div for the first div. Also, setting
display: inline;
in css will have the same effect.
For the text 'i'm lovin it' to be aligned properly you should not give any width for the div.
div is a block element and so will have the property to take the entire block.
Try giving div{display:inline;} in your css.
I am trying to replicate layout of html5doctor.com. I have IE8 installed here.
I am able to produce following output:
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
</div>
<div id="nav">
<div id="navmenus">
<ul id="navmenulist">
<li class="menu" id="id1">
Home
<li class="menu">
Products
<li class="menu">
About Us
</ul>
</div>
</div>
<div id="content" >
<div id="article"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/
Just deleted it for simplicity
*/
body
{
margin:0px;
padding:0px;
background-color:#E8E8E8;
text-align:center;
}
#header
{
background-color:#1F7ADB;
width:100%;
height:150px;
}
#nav
{
background-color:#1F7ADB;
width:100%;
text-align:center;
}
#navmenus
{
background-color:#14B3F7;
width:900px;
text-align:left;
}
li.menu
{
list-style:none;
display:inline;
height:35px;
padding:12px;
}
li.menu:hover
{
background-color:yellow;
}
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
}
Notice li.menu:hover in above CSS. It is not working in IE8. So I added <!DOCTYPE html> as suggested at this thread.
It made hover work but now it broke the layout as follows:
I will like to get result that will work on IE8 first and then will like to learn work around that will work consistently in major (may not be in IE6) browser. And will glad to stick to CSS and HTML (no script). And above all will like to learn whats exactly wrong here.
Remove the text-align:center; from the body and use margin:auto for the block elements you want centered in the page..
The elements that require it are #navmenus and #content, so
#navmenus
{
background-color:#14B3F7;
width:900px;
margin:0 auto;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin:0 auto;
}
I would update the CSS for the content area to this:
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin: 0 auto;
}
Using the margin will center this element, rather than trying to use text-align on the parent element.
I have this code :
<div class="footer_bar_row_desc_richedi">
<a class="myText" href="#">My Text</a>
<div class="myDiv">
 
</div>
</div>
.myText
{
text-transform:uppercase;
font-weight:bold;
color:#b90e1d;
text-decoration:none;
float:left;
font-size:12px;
padding-top: 1px;
text-align:right;
}
.myDiv
{
float:right;
width:25px;
padding-right:5px;
text-align:right;
margin-bottom:3px;
background:red;
}
and I'd like to put the text on the link to the right, near (on the left) of the red div. Seems that attribute text-align:right; doesnt works. Any Idea?
You need to give your .mytext div a width. It is collapsing to the exact width of your text at the moment which means that right aligning the text looks as if it is doing nothing...
See
http://jsfiddle.net/hS3JA/
by default the A tag has inline display style (fit container to contents size). you must set display:block; so the attributes width, height, text-align will affect the object
try this:
<div class="footer_bar_row_desc_richedi">
<div class="myDiv">
 
</div>
<a class="myText" href="#">My Text</a>
</div>
.myText
{
text-transform:uppercase;
font-weight:bold;
color:#b90e1d;
text-decoration:none;
float:right;
font-size:12px;
padding-top: 1px;
/*text-align:right;*/
}
.myDiv
{
float:right;
width:25px;
padding-right:5px;
text-align:right;
margin-bottom:3px;
background:red;
}
text-align: right will only align the text to the right inside its own element. Since a is an inline element, it never takes up more width than it needs, and text-align is rendered useless.
Try putting display: inline-block in .myText { } and give it a width.
I had the same problem. I solved it by encapsulating it in paragraph tag...
<p style="text-align:right;">...link...</p>