Alright this never works when I need to setup two divs (one floating and fixed width) and another div with margin to the size of floating div width.
I tried clear: both, and some other work arounds. Nothing being successful. Is there an overall better way to do this?
HTML:
<div class="usercpwrap">
<ul class="usercptabs">
<li>Account</li>
<li>Friends</li>
<li>Messaging</li>
<li>Reputation</li>
</ul>
<div class="usercpcont">
Ajax load page content from: /usercp/{page}.php
goes here.
</div>
</div>
CSS:
.usercptabs{
float: left;
position: relative;
width: 225px;
margin: 0;
padding: 0;
clear: both;
list-style-type: none;
border-right: 1px solid blue;
}
.usercptabs li{
height: 40px;
line-height: 40px;
padding-left: 10px;
border-bottom: 1px solid blue;
}
.usercptabs li:last-child{
border-bottom: none;
}
.usercpcont{
margin-left: 225px;
}
Try:
.usercpwrap{overflow:hidden;}
DEMO here.
OR:
Clear float.
<div class="usercpwrap">
<ul class="usercptabs">
<li>Account</li>
<li>Friends</li>
<li>Messaging</li>
<li>Reputation</li>
</ul>
<div class="usercpcont">Ajax load page content from: /usercp/{page}.php goes here.</div>
<div class="clr"></div>
</div>
CSS:
.clr{clear:both;}
DEMO here.
only to double the margin because it overrides the exact length of that floating div
.usercpcont{
margin-left: 550px;
}
give clear:both; after usercpcont DIV
<div class="usercpwrap">
<ul class="usercptabs">
<li>Account</li>
<li>Friends</li>
<li>Messaging</li>
<li>Reputation</li>
</ul>
<div class="usercpcont"> Ajax load page content from: /usercp/{page}.php
goes here. </div>
<div style="clear:both;"></div>
</div>
working fine.
Related
I am trying to design a simple ecommerce website, in that my footer tag text is displayed right beside the section tag. I have no idea where I am doing wrong.
HTML
<aside id="categories">
<header id="headings" class="background_div">Categories</header>
<nav>
<ul>
<li>Staples</li>
<li>Oils</li>
<li>Vegetables</li>
<li>Fruits</li>
</ul>
</nav>
</aside>
<div id="bestsellers">
<header id="headings" class="background_div">Bestsellers</header>
<article class="productarticle">
<figure>
<img src="faded-short-sleeve-tshirts.jpg" alt="cabbage"/>
</figure>
<div class="align_text">
<header id="headings">
<span class="productarticlename">Cabbage 1</span>
</header>
<p class="productprice">$10</p>
<div class="addtocart">
Add to Cart
</div>
</div>
</article>
<!-- 4 More Article Tags will be included here -->
</div>
</section>
<footer>
<div clas="heading">This is footer text</div>
</footer>
CSS
#content{
width: 100% px;
display: block;
}
.carousel_img{
width: 1000px;
}
#headings{
font-weight: bold;
}
#categories{
float: left;
}
#bestsellers{
float: left;
margin-left: 25px;
margin-right: 0 px;
width: 80%;
height: 100%;
margin-bottom: 20 px;
}
.background_div{
background: lightgreen;
}
.productarticle{
float: left;
}
.align_text{
text-align: center;
}
Please help me. I want the content in section tag and the text in footer tag to be displayed in seperate lines.
JS-FIDDLE DEMO
See this fiddle
Since your #content contains of floated elements, you also need to float the #content div. Thus add a float:left; to #content.
Now to clear this float effect from the footer, you need to add clear:both; to your footer CSS. Thus the changed CSS would be like
#content{
width: 100% px;
display: block;
float:left;
}
footer{
clear:both;
}
I'm trying to create a vertical bullet navigator for a website with parallax scrolling. Unfortunately the redirect of the nav isn't working.
here's the jsfiddle: http://jsfiddle.net/r1yq7pLd/
Scrolling seems ok but the anchor doesn't work. Anyone knows the reason?
html:
<div id="wrapper">
<section id="main_bg" data-type="background" data-speed="10">
</section>
<section class="content" data-type="text">
<article>I am absolute positioned</article>
</section>
<nav>
<ul>
<li>•</li>
<li>•</li>
<li>•</li>
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</nav>
</div>
css:
body{
background-color:#1599D0;
}
#wrapper{
width:100%;
height: 1000px;
}
nav{
top: 35%;
position: fixed;
right: 50px;
width: 30px;
border-left: double rgba(255,255,255,0.4);
border-right: double rgba(255,255,255,0.4);
}
ul li a{
color: rgba(255,255,255,0.4);
font-size: 30px;
text-decoration: none;
text-indent: -9999px;
padding: 0 10px;
}
#main_bg{
background: url("../img/wall_index1.jpg") repeat fixed;
/* Set rules to fill background */
min-height: 100%;
background-size:cover;
/* Set up proportionate scaling */
width: 100%;
/* Set up positioning */
position: relative;
}
.content{
position:relative;
width: 100%;
background-color:#000;
padding: 200px;
font-size: 50px;
color: #FFF;
height: 500px;
}
Note: the menu here is a bit messy due absence of reset.css. Is it possible to insert it in jsfiddle?
It's not to do with the CSS you're using, it's because you've not set your anchors properly. Pag2 and Top are should be set as ids, with the navigation using href to link back to them - you have both set as href. Also, you don't need to actually set separate anchors anymore, you can just use ids within your existing elements. Finally, exclude the hash from the id itself, that's just to tell the link to look for an anchor rather than a new page.
Your html should be:
<div id="wrapper">
<section id="main_bg" data-type="background" data-speed="10"></section>
<section class="content" data-type="text">
<article id="pag2">I am absolute positioned</article>
</section>
<nav>
<ul>
<li>Top</li>
<li>Page 2</li>
<li>...other links</li>
<li>...other links</li>
<li>...other links</li>
</ul>
</nav>
</div>
There's no need for separate top anchor, "#" will always go to the top of the current page.
Incidentally, I'm not sure why you've got bullets within your list - by default, an unordered list (<ul>) will put bullets in for you, so I've replaced your link text with something more meaningful.
I'm creating a navigation bar, in which there are five different links. Using div elements, I created the nav bar and then separated each link into its own container. By default, they all crush over to the left side, not centered in the nav bar. To get along without a totally misaligned nav bar, I added approximate widths to equally space out each link from one another; however, it's not perfectly aligned and I need a more professional way about centering them.
You can visually see what I'm talking about here: http://jsfiddle.net/W2Pez/2
You can see that they're not all equally spaced out from one another. I plan on removing the width attributes from each link, so how do I make it so that each link is the same number of pixels away from one another WITHOUT using widths? Please note each link's container cannot be the same width, since, for example, the amount of empty space left over from "Home" would be a lot more than "Rates & Packages".
CSS:
#nav {
background-color: #C08374;
height: 50px;
line-height: 50px;
width: 1000px;
margin: auto;
vertical-align: middle;
border: 1px solid #A76358;
}
.nav_button {
float: left;
text-align: center;
line-height: 50px;
}
HTML:
<div id="nav">
<div class="nav_button" style="width: 25px"></div>
<div class="nav_button" style="width: 175px">
Home
</div>
<div class="nav_button" style="width: 250px">
Rates & Packages
</div>
<div class="nav_button" style="width: 175px">
About Us
</div>
<div class="nav_button" style="width: 150px">
Menu
</div>
<div class="nav_button" style="width: 250px">
Nearby Attractions
</div>
<div class="nav_button" style="width: 25px">
</div>
The trick is to set the container to have text-align: center and then have the list (it should be a <ul> set to display: inline-block. That will center the whole list and you can then float the list elements and control how far apart they are from each other using margins.
Here's a stripped down version of your code:
HTML
<div id="nav">
<ul>
<li class="nav_button">
Home
</li>
<li class="nav_button">
Rates & Packages
</li>
<li class="nav_button">
About Us
</li>
<li class="nav_button">
Menu
</li>
<li class="nav_button">
Nearby Attractions
</li>
</ul>
</div>
CSS
#nav {
background-color: #C08374;
border: 1px solid #A76358;
text-align: center;
}
ul {
list-style: none;
display: inline-block;
}
ul li {
float: left;
margin: 0 20px;
}
ul li a {
color: white;
}
Here's a fiddle.
Hi im trying to set some divs inline and i dont know what else to do.
.menuboton{
display:inline;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
display:inline;
margin-right:4em;
}
There are two classes, first are 4 divs and the another is one div with an <img> inside. Those divs are inside another div:
#elmenu{
margin:auto;
margin-bottom:10px;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
}
This is my problem: the 4 divs always are slightly below the one with the <img> inside and cross over the container div (elmenu). For fix that I tried setting it display:inline-block and fix the problem of exceds the container limit but still below the one with <img> inside.
Here the html code:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="psds/logo.png" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
</div>
Pics:
Using display:inline;
Using display:inline-block;
I want all divs stay at the same level!
Some guess?
Place the Knowit image in left and the menu in right and edit widths accordingly.
HTML:
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.left{ float: left; width: 150px; }
.right { float: right; width: 150px; text-align:left; }
Edit on OP request:
To center object within div class use:
text-align:center;
to center align the div container use:
margin: 0 auto;
All this information can be found at http://w3schools.com/
You should try to use span instead of div. Also use float:left
vertical-align: middle on #elmenu should do the trick along with display: inline-block; on the logo and menu items.
first you should build your menu from a list or a nav tag.
Inline-block is a good idea, you can easily size and align your elements.
To build your menu you need:
inline-boxes
text-align:center.
line-height
float (just once)
First element (holding logo for instance) can float left.
set a line-height to size (min-)height of the nav bar.
here we come to this : http://jsfiddle.net/GCyrillus/CaR7a/
.menuboton {
display:inline-block;
padding:0.7em;
border-radius: 4px;
background-color: #093;
line-height:1.2em;
}
.menu {
float: left;/* logo */
}
#elmenu {
padding:0;
margin:0;
list-style-type:none;
line-height:48px;/* logo's height */
text-align:center;
border-top:1px solid black;
border-bottom:1px solid black;
}
a {
color:white;
text-decoration:none;
}
<ul id="elmenu">
<li class="menu" id="logo"><img id="imglogo" src="http://placehold.it/1&1" /></li>
<li class="menuboton">Inicio</li>
<li class="menuboton">Posts</li>
<li class="menuboton">Login</li>
<li class="menuboton">Usuario</li>
</ul>
I hope it is useful
Like my comment, the Css should like this
.menuboton{
float: left;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
float: left;
margin-right:4em;
}
UPDATE:
HTML:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="http://www.winphoneviet.com/forum/data/avatars/l/35/35914.jpg?1370081753" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
<div style="clear: both;"></div>
</div>
This's Fiddle
I have floated two elements right in the header of my website which are <div id="twitter"> and <div id ="navbar>, but there appearance becomes skewed when I view them in IE6 and IE7. I believe that I either need to clear the floated elements or apply a clearfix but I am unsure as to where.
here is an image of the issue in IE6 and IE7:
This is the desired result as it would appear in modern browsers.
Here is a link to the web page: http://www.bestcastleintown.co.uk/pg/
CSS:
#twitter {
background: red;
float: right;
height: 40px;
margin-bottom: 40px;
width: 200px;
}
#navbar {
font-size: 2.2em;
float:right;
}
HTML:
<div id="main_header">
<div id="inner_main_header">
<div>
<div id="main_logo">
<div class="home_page_logo left">
<img src="PG_awards_logo.gif">
</div>
</div>
<div>
<div id ="twitter" class="padall">
Follow us
</div>
<div id ="navbar" class="right">
<ul class="nav NG">
<li>home</li>
<li>enter</li>
<li>categories</li>
<li>judging</li>
<li>sponsorship</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Change #navbar style to this:
#navbar{
font-size: 2.2em;
float: right;
width: 60%;
overflow: auto;
}
Just give the #navbar some width and overflow other than visible.