...

View Full Version : float:left;



oxxiz
07-03-2011, 02:01 PM
Hello

The problem can be viewed here: www.zixoo.net

the home, register, etc... links should float right from the logo, but instead they are on the right but they are kinda under the logo (I want them in the middle inline in the gray area). why doesn't it work like that? I used for example:
#home {
float:right
}

well, another problem is (but can't be viewed here) that the header itself is actually the body (as in <body class="body">) and not a div, because when it's a div it doesn't have 100% width and it also has some space empty on the top. I'm trying to fix that for a couple of days now, because as you see the page ain't much yet.

here's some html:


<body class='body'>
<div id='index_top'>
<ul id='logo'>
<li><a href='index.php' class='logo'></a></li>
</ul>
</div>
<br />
...blablabla...

and here's some CSS:

html, body{
font-family:arial;
}
a {
text-decoration:none;
list-style-image:none;
-moz-outline-style: none;
outline: none;
}
ul {
list-style-type:none;
}
*:focus {
outline:none;
}
/* Header */
#header {
height:10%;
}
#home {
float:right;
}
#profile {
float:right;
}
#msgs {
float:right;
}
#notifs {
float:right;
}
#buds {
float:right;
}
#shared {
float:right;
}
/* End of Header */
/* Left */
#left {
float:left;
border:1px solid black;
width:15%;
top:0;
left:0;
right:0;
bottom:0;
}
/* End of Left */
/* Content */
#content {
border:1px solid black;
width:70%;
margin-right:15%;
margin-left:auto; }
/* End of Content */
/* Right */
#right {
float:right;
width:15%;
border:1px solid black;
position:fixed;
}
/* End of Right */
/* Index Login */
#formindex {
padding-top:30px;
}
#indexmenu {
float:right;
}
.name {
height:28px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
width:200px;
border:1px solid #e5e5e5;
}
.name:focus {
border:1px solid #d4d2d2;
}
.submit {
display:block;
background-image:url('pictures/login.png');
height:26px;
width:74px;
}
.submit:hover {
background-position:0 -38px;
}
a.submit {
padding-top:9px;
font-size:13px;
color:#cdcdcd;
}
a.submit:hover {
color:#959595;
}
/* End of Index Login */
/* Index Top */
.body {
background-image:url('pictures/index_top.png');
background-repeat:repeat-x;
}
#logo li a {
background-image:url('pictures/logo.png');
display:block;
}
.logo {
width:176px;
height:52px;
}
#logo a.logo:hover {
background-position: 0px -52px;
}
/* End of Index Top */
Thanks in forward :)

abduraooft
07-03-2011, 02:55 PM
The problem can be viewed here: www.zixoo.net
Really?

oxxiz
07-03-2011, 04:09 PM
Oops, I forgot to upload it. i'll upload it when I get home.

oxxiz
07-03-2011, 06:07 PM
now it can be seen on www.zixoo.net
I updated the page :)

Sammy12
07-03-2011, 07:46 PM
delete the "menu" div, float ul#logo to the left, add an id to the <ul> of "register, home" and float it to the right.



#index_top { height: 52px; }

#index_top ul#logo { float: left; }

#index_top ul#register { float: right; }




<div id="index_top">
<ul id="logo">
</ul>
<ul id="register">
</ul>
</div>

oxxiz
07-04-2011, 12:08 AM
thanks :P
now how about that "changing the background" problem ? and the logo should be higher and not that low (it's now on the orange line). you can check it out on the page. I tried margin-bottom but it won't work at all

Sammy12
07-04-2011, 12:22 AM
reset your tags


stick this in a style tag at the top of the page


body, html, div, fieldset, form, img li, ol, p, ul {
margin: 0;
padding: 0;
}

img { border: 0; }

fieldset { border: 0; }
input { margin: 0; }

a { color: #03C; outline: none; border: 0; text-decoration: none; }
a:hover { text-decoration: underline }


All tags have default margins and paddings, so you want to set them to 0.

oxxiz
07-04-2011, 12:45 AM
thanks again :) as you see I'm not good in css yet ...
and one more thing:
how can I center the logo now? so the logo will be in the middle?
I tried <center> and deleting the float:left; part but the hrefs are then below the orange line...
and really, I appreciate your help! :D

Sammy12
07-04-2011, 01:06 AM
ul#logo {
width: 176px;
margin: auto;
}


you have to take the float out from the logo though.

shankar.adodis
07-04-2011, 07:32 AM
Hello ,

provide width and margin:0 auto to



#index_top{}


so that both will remain in center of the header

any more question please let me know

vikram1vicky
07-04-2011, 09:34 AM
instead of using

body, html, div, fieldset, form, img li, ol, p, ul { margin: 0; padding: 0; }
you can use...

* {
margin:0;
padding:0;
}

oxxiz
07-04-2011, 10:46 AM
used that, and you can check the results on the page. (here (www.zixoo.net)is the link again).
you see, now the home and register links are under the orange line, which is what I don't want.

have a nice day :D

vikram1vicky
07-04-2011, 11:05 AM
Can you share image of layout how you want... I can help you in better way

oxxiz
07-04-2011, 02:23 PM
here is a quick photoshop mockup:
http://www.shrani.si/f/3w/PB/1UMKd8OY/mockup.png

vikram1vicky
07-04-2011, 03:08 PM
Please use below given CSS


* {
margin:0;
padding:0;
}
body {
background:url(index.jpg) repeat;
}
#header {
background:#EEE;
border-bottom:3px solid #F90;
height:100px;
}
.center {
width:960px;
margin:0 auto;
height:100%;
}
#header a{
display:block;
width:20%;
float:left;
vertical-align:middle;
color:#F90;
font:bold 12px Verdana, Geneva, sans-serif;
text-decoration:none;
text-align:center;
padding:30px 0;
}
#header #logo {
width:60%;
float:left;
text-align:center;
}
#header #logo *{
display:block;
margin:10px auto 0;
}
here is HTML:


<div id="header">
<div class="center">
<a href="#">Menu 1</a>
<div id="logo">
<img src="vikram.jpg" width="200" height="50" alt="logo" title="logo" />
<input type="text" width="200" />
</div>
<a href="#">Menu 2</a>
</div>
</div>Cheers :)

oxxiz
07-04-2011, 03:32 PM
that picture I posted was a mockup of how it should be aligned, nothing else :P
so this top post doesn't exactly do what I need it too... and the logo itself is a sprite
all I want right now is to make those two menus float right and left from the logo like up there :)
and still don't know how to make the background pattern work... cuz currently it for some reason doesn't take up the space I want it too

vikram1vicky
07-04-2011, 03:42 PM
I think you can use same code (What you need) for floating your menus...

For background pattern visit following link...

http://nicole.cfwebtools.com/index.cfm/2008/2/14/Photoshop-Diagonal-Line-Background
(http://nicole.cfwebtools.com/index.cfm/2008/2/14/Photoshop-Diagonal-Line-Background)

Cheers :)

oxxiz
07-04-2011, 04:02 PM
For background pattern visit following link...

http://nicole.cfwebtools.com/index.cfm/2008/2/14/Photoshop-Diagonal-Line-Background
(http://nicole.cfwebtools.com/index.cfm/2008/2/14/Photoshop-Diagonal-Line-Background)

Cheers :)

I have the pattern already, but when I use it, it looks something like this:

http://www.shrani.si/f/3b/H5/EmGQMOr/pic.png

so the pattern is above and on all the sides of the header. I only want it UNDER the orange line, so the header has 100% width and 52px height :)

vikram1vicky
07-04-2011, 04:15 PM
don't define width for header...

for further help you can contact me on yahoo Id "prgmr_c"

teedoff
07-04-2011, 04:38 PM
You need to start with valid semantic code, which means a valid doctype that you dont have currently.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

You also have a <link> tag inside your body. Link tags should be defined inside the head section of your document.

In fact, your whole page structure is incorrect. All html documents should start out with

1: a valid doctype like above
2: opening and closing <html> tags
3: opening and closing <head> tags
4: opening and closing <title> tags within the head section
5: opening and closing body tags.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
embedded styles and external style page link go here.
</head>
<body>
All page content that would be visible to users here(html markup).
</body>
</html>

oxxiz
07-04-2011, 09:44 PM
I only posted a part of the code, not the whole code (the structure itself is correct).

teedoff
07-05-2011, 12:31 AM
I only posted a part of the code, not the whole code (the structure itself is correct).

I didnt look at the code you posted. I pulled your code source. I also validated your page URL which resulted in:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.zixoo.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Here is the code source taken directly from your site:


<body class='body'><title>zixoo</title>
<link rel='stylesheet' type='text/css' href='layout.css'>
<div id='index_top'>
<ul id='logo'>
<li><a href='index.php' class='logo'></a></li>
</ul>
<ul id="register">
<li id="home"><a href='index.php'>home</a></li>
</ul>
<ul id="home">
<li id="home"><a href='register.php'>register</a></li>

</ul>
</div>
<br />
<div align="center" id="form">
<form action="login.php" method="POST" class="form2" id="formindex" >
<input type="text" name="username" placeholder="username" class="name"><p class="p" />
<input type="password" name="password" placeholder="password" class="name"><br class="p" />
</form>
<a href="javascript:;" onclick="javascript: document.getElementById('formindex').submit()" class="submit">Log in</a>
</div>
</body>


So no the structure is not correct.

oxxiz
07-05-2011, 12:08 PM
oh nevermind ... on this index page it's not correct, but when you log in it is... I'll fix it :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum