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.
Related
Note: I would be displaying this page on my SharePoint 2010 site.
I am trying to use CSS table to display and following is my HTML code for it:
<div id="cr">
<ul class="contact-img">
<li><img src="Landing page/Contacts/CassWade.png"></li>
<li>Cass Wade<br/>Project Manager</li>
<li><img src="Landing page/Contacts/Meredith.png"></li>
<li>Meredith<br/>HR Head</li>
<li><img src="Landing page/Contacts/Simon.png"></li>
<li>Simon<br/>CEO</li>
<li><img src="Landing page/Contacts/Roger.png"></li>
<li>Roger<br/>Director</li>
<li><img src="Landing page/Contacts/Sharyl.png"></li>
<li>Sharyl<br/>Employee</li>
</ul>
<hr/>
</div>
Here is my CSS for the above page:
.contact-img{
position: relative;
list-style:none;
display:table;
border:none;
padding:none;
margin:none;
}
.contact-img li
{
display:table-cell;
padding:10px 10px 10px 10px;
vertical-align:middle;
margin-left: 25px;
}
I was trying to display these images and its corresponding name in tabular format. The problem with this table is that width of the cell is getting resized as per the content of the cell. However, i want to fix the table cell width (no restrictions on height). Also I want to restrict the number of columns to 4. Any more entries should go to next row.
Any help on how to achieve would be highly appreciated. Thanks in advance.
My solution uses flexbox CSS3 properties to allow the boxes to be aligned and to wrap if the window gets to small. If you don't want this additional responsive behavior, you can change the max-width for width which in any case limits the number element to 4 per line.
I had to add boxing (div) inside to fix the cell size.
HTML:
<ul class="container">
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=1"></div>
<div class="description"><div>Cass Wade<br/>Project Manager</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=2"></div>
<div class="description"><div>Meredith<br/>HR Head</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=3"></div>
<div class="description"><div>Simon<br/>CEO</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=4"></div>
<div class="description"><div>Roger<br/>Director</div></div>
</div>
</li>
<li>
<div class="inside-container">
<div><img src="http://dummyimage.com/100x100/000/fff.png&text=5"></div>
<div class="description"><div>Sharyl<br/>Employee</div></div>
</div>
</li>
</ul>
CSS:
.container {
list-style: none;
-webkit-padding-start: 0px; /* fixing Chrome auto style */
display: flex;
flex-wrap: wrap;
max-width: 800px; /* max 4 items of 200px width per line */
}
/* the content as a bloc */
.inside-container {
width: 200px;
height: 100px;
display: flex; /* makes the description to stay next to the image */
}
.inside-container div {
width: 100px;
height: 100px;
}
.inside-container div.description {
text-align: center;
}
.inside-container div.description div {
display:table-cell;
vertical-align: middle;
}
Hope it helps!
edit:
To center your text horizontally you need the container to have text-align: center;.
To center horizontally, you need to put your text in a <div> and add these properties display: table-cell; vertical-align: middle;. It's not as beautiful as I would like, but it works well!
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 am doing a practice because I recently started programming and I have come to areal block in my road, I am not kidding when I said I have been stuck in this part since morning, first with some troublesome images and now this.
Basically I need to move a div that has imgs and some text up so it stays just beneath the "Logo" but it won't budge! I tried to a lot of this but alas to no avail, I even checked it out on firebug and it appears as if the div containing the logo extends beyond what it should but I am positive I didn't mess it up like that.
Also I cannot use ,styles in html or % for this.
<div id="header">
<img src="imgs/logo.png" id="logo" />
<img id="donate" />
<div id="divMenu">
<ul id="menu">
<li>Home</li>
<li> About </li>
<li> Our Programs </li>
<li> Gallery </li>
<li> Contact </li>
<li> Blog </li>
</ul>
</div>
</div>
<div id="bodyLogo">
<img src="imgs/bg-featured.jpg"alt="" />
</div>
<div id="slogan">
<p>As The Saying Goes.. </p>
<p>You Don’t Know What You’ve Got </p>
<p> ‘Till It’s Gone.</p>
<h2>Plant A Tree.</h2>
<h2> Grow A Tree.</h2>
<h2><span id="tituloSpan">Save The Future.</span></h2>
</div>
Here is where it makes a invisible jump I cannot bridge!
<div id="divPictures" class="opacity">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT"</p>
<div id="flecha">
<img src="">
</div>
</div>
<div class="right" >
<img src="imgs/what-we-do.jpg" alt="">
<p>"TEXT."</p>
<div id="flecha">
<img src="">
</div>
</div>
</div>
And the CSS:
body{
width: 956px;
font-family: 'Rokkitt', serif;
background: url("../imgs/bg-header.jpg");
background-repeat:repeat-x;
text-decoration: none;
margin: 0 auto;
}
#bodyLogo{
height: 396px;
position: relative;
margin: 18px 0 0 0;
}
#divPictures{
position: absolute;
width: 956px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 700px 0 ;
vertical-align: top;
}
.left{
width: 478px;
float:left;
font-family: 'Quattrocento Sans', sans-serif;
}
.right{
width: 478px;
float:right;
font-family: 'Quattrocento Sans', sans-serif;
}
.left img, .right img{
margin: 0 0 0 10px;
}
#flecha{
background: url("../imgs/arrow-gray.png");
background-repeat: repeat-x;
width: 460px;
}
Thanks A LOT in advance.
Best Wishes.
You have a fixed height on your #bodyLogo which would make it extend past it's size. I don't know how large you have your images, but everything should snap right below it if you remove that height.
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.
I am trying to align the elements in the head portion of a webpage properly.
There are three elements placed inside a header div:
The site logo (as an image) wrapped in an anchor tag should be left justified.
A div that contains a bunch of vertically aligned menu elements right justified.
A form containing a search box and a go button. This must be centered horizontally in the page and show between to logo on the left and the menu items on the right.
All three elements should be justified to the bottom of the header div.
I have been wrestling with this but nothing seems to work. Can you please help? Thanks!
<div style="float: right;">
<ul>
<li>Menu item</li>
</ul>
</div>
<div style="float: left;">
<img style="border: 0;" src="something.png" />
</div>
<div style="width: 300px; margin: 0 auto;">
Search box
</div>
Just a quick mockup.
UPDATE: using table/table-cell trick to allow vertical-align: bottom;
You need to wrap your manu, logo and searchbox into <div> with display: table-cell; css rule.
The markup:
<div class="table header">
<div class="table-cell">
<div class="logo"> </div>
</div>
<div class="table-cell">
<div class="searchbox"> </div>
</div>
<div class="table-cell">
<div class="menu"> <br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
</div>
and css:
.table {
display: table; /* our outer contaner should behave like table; */
width: 100%; /* set width to 100% */
}
.table-cell {
display: table-cell; /* our internal wrapper should behave like table cell to allow vertical-align */
vertical-align: bottom; /* align all elements vertical */
background: yellow; /* for debug purposes */
}
.logo {
float: left;
width: 100px;
background: green;
}
.menu {
float: right;
width: 100px;
background: red;
}
.searchbox {
margin: 0 auto;
width: 100px;
background: blue;
}
Complete example: http://jsfiddle.net/EREmH/4/