Jump to content

CSS Floats

ShoeLace1291

By ShoeLace1291
in CSS Help

 Share

Recommended Posts

ShoeLace1291 Advanced Member

ShoeLace1291

Posted
Posted

I am having a problem with my css coding that I can't figure out.  In the attachment, the news section is below the left navigation menu when the news should be directly to the right of the navigation menu.  How do I get it so the news will be in the correct position?

 

This is my HTML code:

<HTML>
<HEAD>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<TITLE>Storm Creations.net</TITLE>
<LINK rel=stylesheet href='storm.css'>
</HEAD>
<BODY>


<script type="text/javascript">

/***********************************************
* AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="services.php?act=hosting">HOSTING</a>'
menu1[1]='<a href="services.php?act=template">TEMPLATE DESIGN</a>'
menu1[2]='<a href="services.php?act=coding">CUSTOM CODING</a>'



//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="downloads.php?cat=resources">RESOURCES</a>'
menu2[1]='<a href="downloads.php?cat=phpscripts">PHP SCRIPTS</a>'
menu2[2]='<a href="downloads.php?cat=templates">FREE TEMPLATES</a>'

//Contents for menu 2, and so on
var menu3=new Array()
menu3[0]='<a href="tutorials.php?program=photoshop">ADOBE PHOTOSHOP</a>'
menu3[1]='<a href="tutorials.php?program=gimp">THE GIMP</a>'
menu3[2]='<a href="tutorials.php?program=php">PHP PROGRAMMING</a>'
menu3[3]='<a href="tutorials.php?program=html">HTML LAYOUTS</a>'
menu3[4]='<a href="tutorials.php?program=css">STYLE SHEETS</a>'


var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

</script>
   <div class='wrapper'>
     <div id='banner'><img src='images/banner.gif' width='100%'></div>
     <div align='center' id='toplinks'>

              <ul align='center' class='midbar'>
              <li><a href='index.php'>home</a></li>
              <li><a href='support.php'>support</a></li>

              <li><a href='staff.php'>staff</a></li>
              <li><a href='forums/index.php' target='new'>forum</a></li></ul></div>
     <div id='middle'><div id='menu'>

              <ul class='mainnav'>
              <li><img src='images/navigation.gif'></li>
              <li><a href='index.php'>Index</a></li>
              <li><a href='forums/index.php' target='new'>Forum</a></li>
              <li><a href='support.php'>Support</a></li>
              <li><a href='staff.php'>Staff</a></li>
              <li><a href='services.php'>Services</a></li>

              <li><a href='downloads.php'>Downloads</a></li>
              <li><a href='tutorials.php'>Tutorials</a></li>
              <li><a href='irc.php'>IRC Chat</a></li>
              <li style='border-bottom: 1px solid #396339;'><a href='affiliates.php'>Affiliates</a></li>
              </ul>
    <div class='content'><p align='center'>Site News</p><br><b>Welcome to Storm Creations!</b><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.<br><br><b>Another Article</b><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.<br><hr width='50%'></hr></div>

    </div></div>
</BODY>
</HTML>

 

This is my CSS sheet:

body { background-image: url(images/background.gif);
       background-attachment: fixed;
       font-size: 10px;
       color: #FFFFFF;
       font-family: verdana;
       margin-top: 0px;
       margin-bottom: 0px;
       margin-left: 50px;
       margin-right: 50px;
       background: #6a946a url(images/background.gif) repeat-y 50% 0;
}

a:link, a:hover, a:visited, a:active { color: #FFFFFF; }

.wrapper { background-color: #FFFFFF;
           margin-top: 0px;
           margin-bottom: 0px;
           color: #000000;
}

.navtable { background-color: #396339;
}

.linkrow { background-color: #6a946a;
           text-align: right;
           padding: 3px;
           color: #FFFFFF;
           font-family: verdana;
           font-size: 10px;
           margin-bottom: 0px;
           border-bottom: 1px solid #396339;
           border-right: 1px solid #396339;
}

.linkrowhover { background-color: #396339;
           text-align: right;
           padding: 3px;
           color: #FFFFFF;
           font-family: verdana;
           font-size: 10px;
}

.linkrow a:link, .linkrow a:hover, .linkrow a:visited, .linkrow a:active { color: #FFFFFF; }

midbar { /* background-image: url(images/midbar.gif);
          #FFFFFF;
          padding: 5px;
          text-align: center; 
          vertical-align: middle;
          font-family: verdana;
          font-size: 10px; */
} 
.midbar a:link, .midbar a:hover, .midbar a:visited, .midbar a:active { color: #FFFFFF;   }

.menublank { background-color: #6a946a;
             margin-bottom: 0px; }

.membersarea { background-color: #6a946a;
               color: #e4e4e4; 
               font-size: 10px;
               font-verdana;
               padding: 5px;
               border: 1px solid #396339;
               text-align: left;
}

.navtop { background-color: #396339;
          text-align: center;
          padding: 3px;
          font-size: 10px;
          font-family: verdana;
          color: #FFFFFF;
}

.navtop a { color: #FFFFFF; }


#dropmenudiv{
position:absolute;
background-color: #6a946a;
border:1px solid black;
border-bottom-width: 0;
font:normal 10px Verdana;
z-index: 100;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #396339;

}

#toplinks { background-image: url(images/midbar.gif);
            font-size: 10px;
            color: #FFFFFF;
            font-family: verdana;
            padding: 5px;
            
      
}

#toplinks ul{
/*margin: 0;
padding: 4px;
margin-bottom: 1em;*/
float: center;
width: 100%;
border: 0px;
background-color: transparent;
}



#toplinks ul li{
display: inline;
}

#toplinks ul li a{
float: center;
color: #FFFFFF;
padding: 6px;
padding-top: 0px;
padding-bottom: 0px;
text-decoration: none;
background: transparent url(images/vertical.gif) center right no-repeat;
}

#toplinks ul li a:visited{
color: #FFFFFF;
}

#toplinks ul li a:hover{
color: #FFFFFF;
background-color: transparent;
}


#banner { float: center;
          background-color: transparent;
          width: 100%;
          height: 120px;
          margin: 0px;
}

#mainnav { float: center;
           width: 155px;
}

ul.mainnav{

list-style:none; /* this line will remove any kind of bullet from the menu */

width: 155px; /* sets the menu width */

margin:0;

padding:0;
border: 1px solid #396339;

}



#menu a

{

display: block; /* this is a very important property here and it controls the way the menu elements are displayed - like block-level elements */

padding: 5px 3px 5px 10px; /* sets the padding properties */

font-weight:bold; /* sets the font weight */

background-color: #6a946a; /* sets the color of the background */

border-top: 1px solid #396339; /* this code sets the line between the menu items */

}



#menu a:link

{

color: #efefef; /* sets the font color */

text-decoration: none;

}



#menu a:visited

{

color: #396339;

text-decoration: none;

}



#menu a:hover

{

background:#6a946a url(images/bullet.gif) no-repeat left center; /* when the cursor is over, in the left side of the menu item background it will be display the arrow.gif picture */

text-indent:15px; /* this line of code move the text 15 px to the right */

}



#menu a:active

{

color: #396339;

text-decoration: none;

} 

#menu li { background-color: #6a946a;
           text-align: right;
}

#content {
            float: right;
            wrapping: 0px;
            width: 50%;
}

#middle { float: center;
}

 

Thanks in advance for any help.

 

 

[attachment deleted by admin]

Link to comment
Share on other sites
calabiyau Member

calabiyau

Posted
Posted

I don't know if it relates to your main problem or not but I see throughout your CSS you have used float: center.  Not sure what you are trying to do but there is no such thing as float: center.  You can only use floats to position objects to the left most or right most within a containing block

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.