Jump to content

help floating an element!


co.ador

Recommended Posts

#rc1 ul li {

width:190px;

float::left;

margin:4px;

border:1px solid green;

 

}

 

As you can see above in the css sample I have floated #rc1 ul li to the left but then in the browser is not floating to the left. all other elements are being applied less the floating .......... uch...

 

html code

 

<div id="rmc">

<div id="rc1">
<ul id="rc1ul" >
<li><a href="#">about mansions</a></li>
<li><a href="#">Materials</a></li>
<li><a href="#">Soil of place</a></li>
<li><a href="#">Engineers </a></li>
</ul><!-- end rc1ul -->
<div id="videoplayer"> 
<img src="images/videoplayer.jpg" alt="videoplayer">
<p>Lorem Ipsum is simply dummy text 
of the printing and typesetting 
industry. Lorem Ipsum has been 
the industry's standard dummy
text ever since the 1500s, when
an unknown printer took a galley.</p>
</div><!-- end videoplayer-->
</div> <!-- end rcl -->

<div id="rc2">
<img src="../images/line..gif" alt="line">
<ul id="smallthumbul" >
<li><a href="#"><img src="images/construction1.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/construction2.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/construction3.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/construction4.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/construction5.jpg" alt="1"></a></li>
</ul><!-- end smallthumbsul -->

<div id="largethumbs"> 
<img src="images/construction5.jpg" alt="large">
</div>

</div><!-- end rc2 --> 
</div><!-- end rmc-->

 

Css stylesheet

 

#rmc {

border: 1px solid red;

position:relative;

left:202px;

top:80px;

width:70%;

}

#rc1 {position:relative;

width:100%;

padding:0px;

margin:0px;

}

#videoplayer { margin:0px auto;

border: 1px solid blue;}

 

#videoplayer img{

position:relative;

width:100%;

 

}

#rc1 ul {

list-style-type:none;

margin:0px;

padding:0px;

text-align:center;

}

#rc1 ul li {

width:190px;

float::left;

margin:4px;

border:1px solid green;

 

}

 

Link to comment
https://forums.phpfreaks.com/topic/174456-help-floating-an-element/
Share on other sites

146 posts...

 

You should know how to your


tags by now;

 

<div id="rmc">

<div id="rc1">
<ul id="rc1ul" >
<li><a href="#">about mansions</a></li>
<li><a href="#">Materials</a></li>
<li><a href="#">Soil of place</a></li>
<li><a href="#">Engineers </a></li>
</ul><!-- end rc1ul -->
<div id="videoplayer">
<img src="images/videoplayer.jpg" alt="videoplayer">
<p>Lorem Ipsum is simply dummy text
of the printing and typesetting
industry. Lorem Ipsum has been
the industry's standard dummy
text ever since the 1500s, when
an unknown printer took a galley.</p>
</div><!-- end videoplayer-->
</div> <!-- end rcl -->

<div id="rc2">
<img src="../images/line..gif" alt="line">
<ul id="smallthumbul" >
<li><a href="#"><img src="images/construction1.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/construction2.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/construction3.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/construction4.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/construction5.jpg" alt="1"></a></li>
</ul><!-- end smallthumbsul -->

<div id="largethumbs">
<img src="images/construction5.jpg" alt="large">
</div>

</div><!-- end rc2 -->
</div><!-- end rmc-->

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.