Jump to content

Need help getting a picture and an UL li of pictures inside the box..

co.ador

By co.ador
in HTML Help

 Share

Recommended Posts

co.ador Advanced Member

co.ador

Posted
Posted

 

 

I am facing bugs and properties cong. problems and I need some advice.

 

 

otrasemi.gif

 

If you notice in the largethumb image overlap the the 6px red border wrapping the content which comes from the id #rmc doesn't reach all the way down to entirely wrap the largethumb image in the imageviewer. I was wondering how can I make it contain the largethumb inside of itself and reach the bottom of the largethumb

 

#rmc property

 

#rmc {
border: 6px solid red;
position:relative;
left:202px;
top:80px;
width:65%;
height:100%;

}

 

Largethumb Properties

 

#rc2 ul li img{
position:relative;
text-align:center;
height:100%;
width: 100%;
  margin: 0 auto;
}

#rc2 .largethumb {
margin-top:10px;
width:100%;
height:70%;

}

 

#rmc {
border: 6px solid red;
position:relative;
left:202px;
top:80px;
width:65%;
height:100%;

}
#rc1 {position:relative;
width:100%;
padding:0px;
margin:0px;
}
#videoplayer { margin:0px auto;
width:500px;
position:relative;
top:40px;

}

#videoplayer img{
position:relative;
width:100%;

}
#rc1 ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align:center;
}
#rmc #rc1 ul li {
width:190px;
float:left;
margin:4px;
border:1px solid green;



}
#rc2 {
position:relative;
top:70px;


}

.smallthumbs{
text-align:center;
}
#rc2 .line {
width:100%;
height:3px;

}
#rmc #rc2 ul {
list-style-type:none;

padding:0px;
text-align:center;
width: 750px;
  margin: 10px auto;
  
}



#rmc #rc2 ul li {
width:140px;
height:60px;
float:left;
margin:4px;
border:1px solid green;
text-align:center;
}

#rc2 ul li img{
position:relative;
text-align:center;
height:100%;
width: 100%;
  margin: 0 auto;
}

#rc2 .largethumb {
margin-top:10px;
width:100%;
height:70%;

}

 

I want to say that the image above in this post has been Print Screen from the firefox browser which is presenting this bug but in internet explorer the picture is inside the #rmc element as suppose to be. Why in firefox display differently. I know that different browsers interpret html and css etc differently.

 

how could that be fixed for firefox and still internet explorer display the way it should uch......

Link to comment
Share on other sites
jcombs_31 Advanced Member

jcombs_31

Posted
Posted

The quickest and easiest solution is usually to set the overflow attribute of the container. You could set it to overflow: hidden or auto.

 

I don't know why you are setting relative positions or why you are using left:/top:  Use margins

 

You are doing some pretty strange things with your widths/heights as well. I'd like to see your html.

Link to comment
Share on other sites
co.ador Advanced Member

co.ador

Posted
  • Author
Posted

html code...

 

<html>
<head>
<link type="text/css" href="../stylesheets/restaurantwebpageprueba.css" rel="stylesheet" media="all" />
</head>
<body>
<div id="rmc">

<div id="rc1">
<ul id="rc1ul" >
<li><a href="#">About Restaurant</a></li>
<li><a href="#">Our Cuisine</a></li>
<li><a href="#">Our Team Work</a></li>
<li><a href="#">Hygiene and Guidelines</a></li>
</ul><!-- end rc1ul -->

<div id="videoplayer"> 
<img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="500">
<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 class="line" src="../images/line..gif" alt="line">
<ul class="smallthumbs" >

<li><a href="#"><img src="images/blog1.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/blog2.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/blog3.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/blog4.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/blog5.jpg" alt="1"></a></li>

</ul><!-- end smallthumbsul -->


<img class="largethumb" src="images/blog5.jpg" alt="large">


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

 

#rmc {
border: 6px solid red;
position:relative;
left:202px;
top:80px;
width:65%;
height:100%;


}
#rc1 {position:relative;
width:100%;
padding:0px;
margin:0px;
}
#rc1 ul{
font-size:14px;}
#videoplayer { margin:0px auto;
width:500px;
position:relative;
top:40px;

}

#videoplayer img{
position:relative;
width:100%;

}
#rc1 ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align:center;
}
#rmc #rc1 ul li {
width:190px;
float:left;
margin:4px;
border:1px solid green;



}
#rc2 {
position:relative;
top:70px;
height:inherit;



}

.smallthumbs{
text-align:center;

}
#rc2 .line {
width:100%;
height:3px;

}
#rmc #rc2 ul {
list-style-type:none;
padding:0px;
text-align:center;
width: 750px;
margin: 10px auto;

  
}



#rmc #rc2 ul li {
width:140px;
height:60px;
float:left;
margin:4px;
border:1px solid green;
text-align:center;

}

#rc2 ul li img{
position:relative;
text-align:center;
height:100%;
width: 100%;

}

#rc2 .largethumb {
margin-top:10px;
width:100%;
height:90%;

}

 

I don't know that much CSS pretty well I might have a lot of mistakes sorry..

 

Thank you for your suggestions..

Link to comment
Share on other sites
saltedm8 Member

saltedm8

Posted
Posted

The reason it is like that is because your div 'rmc' cannot detect the div 'rc2', even though it is a child of 'rmc' it cant detect the relative positioning,

 

If I were you I would try my hand at floats... I never learned relative positioning and have only found it useful when making a menu, if for example 'rc2' was floated, it would detect it and shift the red line, but I cant guarantee the results in regards to the rest of it

Link to comment
Share on other sites
sticks464 Newbie

sticks464

Posted
Posted

Give this a try

* {
padding:0;
margin:0;
}

#rmc {
border: 6px solid red;
position:relative;
margin:80px auto 0;
width:65%;
height:100%;
}

#rc1 {
width:100%;
}

#rc1 ul{
font-size:14px;
}

#videoplayer { margin:0 auto;
width:500px;
padding-top:40px;
clear:left;
}

#videoplayer img{
width:100%;
}

#rc1 ul {
list-style-type:none;
text-align:center;
}

#rmc #rc1 ul li {
width:190px;
float:left;
margin:4px;
border:1px solid green;
}

#rc2 {
margin-top:70px;
height:inherit;
}

.smallthumbs{
text-align:center;
}

#rc2 .line {
width:100%;
height:3px;
}

#rmc #rc2 ul {
list-style-type:none;
text-align:center;
width: 750px;
margin: 10px auto;
}

#rmc #rc2 ul li {
width:140px;
height:60px;
float:left;
margin:4px;
border:1px solid green;
text-align:center;
}

#rc2 ul li img{
text-align:center;
height:100%;
width: 100%;
}

#rc2 .largethumb {
margin-top:10px;
width:100%;
height:90%;
}

.clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
}

 

Add a clearing div to clear the floats

 

</ul><!-- end smallthumbsul -->
<div class="clearer"></div>
<img class="largethumb" src="images/blog5.jpg" alt="large">

 

 

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.