Please bear with me - CSS and RWD is quite new to me (a javascript, c++, python person).
I'm trying to center a nested DVI on a RWD (responsive web design page) for a friend.
The code looks like:
<div id="homewrapper" style="margin: 0 auto;">
<div class="section" id="homeleftcol" style="overflow: hidden; margin-left: 7px; margin-right: 7px; text-align: left; clear: left; float: left; cursor: pointer;">
<a title="365x522" href="/a/"><img style="padding: 0px;" alt="" src="black.png" width="356" height="522" /></a>
<div class="hometitle" id="imgtitle">365x522</div>
</div>
<div id="homerightcol" style="clear: none; float: left;">
<div class="section" style="margin-left: 7px; margin-right: 7px; margin-bottom: 0px; overflow: hidden; cursor: pointer;">
<a title="365x254" href="/b/"><img style="padding: 0px;" alt="" src="yellow.png" /></a>
<div class="hometitle" id="imgtitle">365x254</div>
</div>
<div id="learncontact" style="overflow: hidden;">
<div class="section" id="learn" style="margin-left: 7px; margin-right: 7px; overflow: hidden; float: left; cursor: pointer;">
<a title="172x254" href="/c/"><img style="padding: 0px;" alt="" src="blue.png" width="171" height="254" /></a>
<div class="hometitle" id="imgtitle">172x254</div>
</div>
<div class="section" id="contact" style="margin-left: 7px; margin-right: 7px; overflow: hidden; float: left; cursor: pointer;">
<a title="172x254" href="/d/"><img style="padding: 0px;" alt="" src="red.png" width="171" height="254" /></a>
<div class="hometitle" id="imgtitle">172x254</div>
</div>
</div>
</div>
Currently I have a mostly ok solution but when the page is enlarged the DIVs hug the left side.
Wide: Hugs the margin-left:7px
Here are a few other views (you can see it still hugs to the left but the images scale to fit for the most part.
Your help is greatly appreciated! Thank you so much!!
The layout hugs the right side of the page because you have not set a width-value to the "homewrapper" div. The question How to center a div in a div - horizontally? covers this problem in more detail.
This could be fixed by giving it a total width value like so:
<div id="homewrapper" style="width: 744px; margin: 0 auto;">
However there are some other issues with your code. I don't know if you already are aware of this, but you say that you are new to CSS, so I'll include it anyway.
Writing all of your styling directly in the style attribute of a html tag is considered very bad style and counteracts the benefits of separating content and presentation. You should instead include it in a separate style sheet and include it in the header of the html-document. w3schools will show you the way to enlightenment.
Related
I am having an issue with my webpage.
My div tags on the right side are overlapping onto my center column... I have set a min-width to my parent div tag but it did nothing to help elevate the problem.
Plus my navigation bar is giving me a little issue.. ENGAGEMENT will fall under the ABOUT tab when I re-size my web page. I have display: block; and display: inline; set in my CSS. It works fine just the re-sizing is hurting my web-page..
My layout is basic..
<body>
<div style="width:100%; margin-top: -18px; clear: both;">
<div style="width: 100%; height: 100px; background-color: white;">
<p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
</div>
<div style="width: 100%; display: block; overflow: hidden; ">
<div><li>About</li></div>
<div><li>Books</li></div>
<div><li>Electronics</li></div>
<div><li>Apparel</li></div>
<div><li>Activities</li></div>
<div><li>Engagement</li></div>
</div>
<div style="float: left; background-color: white; margin-left: 80px;">
</div>
<div id="left-col" style="clear: left;">
</div>
<div id="central-col">
</div>
<div id="right-col" style="text-align: center; clear: right; ">
</div>
<div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
</div>
</body>
It would be better if you have given full code (may be on jsfiddle) because it is hard to understand what these divs are doing by looking at your code. (You have made so many of them.)
For your solution, I think you have to remove
width: 100%
from second and third div.
You have set margin-left to 80px, so whenever you resize the window, it will always have a margin of 80px from left.
Also I want to know the use of
overflow: hidden;
in your code.
As i am working on one of the page in which i am getting some strange problem. Like i have designed a page in which the image comes at left side and the corresponding text for the image will come right side. But the issue is the text which i am trying to select is not selecting with the mouse. And also the test for the image comes by leaving one div. Please see this link for better understanding the problem http://www.startonlinegames.com/download1 Please see my code below.
Image description is displaying next to another image. You need to change the placing of divs. I have made slight changes in your code. Check the one block reference below. And remove the empty p tag in description
<div style="float:left; width:462px; height:196px; margin:5px; border:solid #b8cbd2 1px;-webkit-border-radius: 5px;-moz-border-radius: 5px">
<div style="float:right; width:230px">
<p>
</p><div style="background:#fff; margin-left:5px; margin-top: 5px; width:230px; height:150px;">
<p><b>Name:</b>Astrobot</p>
<p><b>Description:</b> Defend our lunar-base and destroy the alien robots nest!</p>
<p><b>Dimensions:</b> 600x600</p>
</div>
</div><div style="background:#fff; margin-left:5px; width:225px; height:150px; margin-top:5px">
<img src="http://www.startonlinegames.com/download/images/538263_Upload.gif" width="225" height="150" border="0" class="imgShadowEffect">
</div>
<div style="margin-top: 10px">
<img src="http://www.startonlinegames.com/download/play.png" border="0" width="117" height="30"><img src="http://www.startonlinegames.com/download/download.png" border="0" width="117" height="30">
</div>
</div>
Changes in first column. same as change others columns.
<div style="float:left; width:462px; height:196px; margin:5px; border:solid #b8cbd2 1px;-webkit-border-radius: 5px;-moz-border-radius: 5px">
<div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); margin-left: 5px; width: 225px; height: 150px; margin-top: 5px; float: left;">
<img width="225" height="150" border="0" class="imgShadowEffect" src="http://www.startonlinegames.com/download/images/538263_Upload.gif">
</div>
<div style="float: left; width: 222px; margin: 0px 0px 0px 8px;">
<div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); margin-top: 5px; height: 150px; width: 220px;">
<p><b>Name:</b>Astrobot</p>
<b>Description:</b> Defend our lunar-base and destroy the alien robots nest! <p><b>Dimensions:</b> 600x600</p>
</div>
</div>
<div style="margin-top: 5px">
<img width="117" height="30" border="0" src="http://www.startonlinegames.com/download/play.png"><img width="117" height="30" border="0" src="http://www.startonlinegames.com/download/download.png">
</div>
</div>
The UI of my page currently shows an Image in backgroud and text on left hand top corner of the page. Following is the code I am using for the image.
<div>
<div style= "z-index: 1; position: absolute; text-align: left; border: 1px solid black;">
<img src="slide1.jpg" alt="alt text" style="height:220px;width:500px;border-width:0px;" />
</div>
<div id="curtain" style="z-index: 2; position: absolute; padding-left: 10px;">
<div style="background-color: transparent; font-weight: bold; font-size: 1.8em; padding-top: 5px;">
Profile
</div>
<div style="font-size: 1em; width: 215px; color: #cccccc;">
He is a good citizen and a great teacher.
</div>
</div>
</div>
I want to add 2 small icons aligned vertically on the right hand side of this image.
Can someone help me with the css ?
Something like this?
http://jsfiddle.net/7KTEQ/
Just add <div id="smallImages"><img src='ONE' /> <img src='two' /></div> inside second div
and css for it is:
#smallImages {
position:absolute;
margin-left:400px;
}
change margin-left for css depending on second div width and image sizes..
I'm trying to learn how to put table content into css floats.
My approach has been to use a div at the "table" level, at the "row" level, and the "cell" level. Not sure this is a good strategy.
Anyway, when I set a background style at the "table" or "cell" level I can see the color change. When I set it at the row level it stays white.
Any guesses what's going on? Is there a better way to do this?
<h2>"Tables" work</h2>
<div style="width: 455px; background-color:#a4c4fc">
<div>
<div style="width: 70px; float: left">ID</div>
<div style="width: 220px; float: left">Lemons</div>
<div style="width: 50px; float: left">Horseradish</div>
</div>
<br clear: both>
<div>
<div style="width: 70px; float: left">1<LEFT></div>
<div style="width: 220px; float: left">3</div>
<div style="width: 50px; float: left">4</div>
</div>
</div>
<br>
<h2>"Row" divs do not seem to work</h2>
<div style="width: 455px">
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left">ID</div>
<div style="width: 220px; float: left">Lemons</div>
<div style="width: 50px; float: left">Horseradish</div>
</div>
<br clear: both>
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left">0</div>
<div style="width: 220px; float: left">0</div>
<div style="width: 50px; float: left">1</div>
</div>
</div>
<br>
<h2>Individual cell divs work</h2>
<div style="width: 455px">
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left; background-color:#a4c4fc">ID</div>
<div style="width: 220px; float: left; background-color:#a4c4fc">Lemons</div>
<div style="width: 50px; float: left; background-color:#a4c4fc">Horseradish</div>
</div>
<br clear: both>
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left; background-color:#a4c4fc">0</div>
<div style="width: 220px; float: left; background-color:#a4c4fc">0</div>
<div style="width: 50px; float: left; background-color:#a4c4fc">1</div>
</div>
</div>
This looks like tabular data.
If it is, you should use a HTML table element to display this information.
Too many people make the mistake of hearing "tables are bad", and try and do work arounds using div's, even when tables are most appropriate.
When people say you shouldn't use tables, they are referring to layout structure. It is still fine to use it in this case, they are not evil!
Then you'll be able to do:
<tr style="background-color:#a4c4fc;">
</tr>
If you are certain on using div's your issue is because the "cell" divs are all float:left;. Therefore your "row" div doesn't have a height.
You could add the following to the bottom of the "cell"'s to fix this:
<div style="background-color:#a4c4fc">
<div style="width: 70px; float: left">ID</div>
<div style="width: 220px; float: left">Lemons</div>
<div style="width: 50px; float: left">Horseradish</div>
<div style="clear:both;overflow:hidden;height:0;"></div>
</div>
Alternatively, use display:inline-block;
<div style="background-color:#a4c4fc">
<div style="width: 70px; display:inline-block;">ID</div>
<div style="width: 220px; display:inline-block;">Lemons</div>
<div style="width: 50px; display:inline-block;">Horseradish</div>
</div>
http://jsfiddle.net/hRCWk/2/
But don't do that, use a table :)
Clear your floats. Add overflow:hidden; to your row div.
Also, <br clear: both> makes no sense. Remove it or use <div style="clear:both;"></div>
Demo: http://jsfiddle.net/RX8Pq/
The row element isn't stretching because all the sub elements are floated:
http://www.quirksmode.org/css/clearing.html
Instead of floating you DIV elements you could set them to display as inline blocks...
display:inline-block;
then you dont need to clear the DIV floats afterwards.
Of course, you should just use a table anyway
NOTE: Apparently this will not work in IE8 and earlier versions.
I have some Divs floating but for some reason the 3rd DIV doesn't go under the 1st DIV. I can't figure out why? I think it has something to do with the images. When the images are not in, they float fine.
http://jsfiddle.net/xtian/9Je65/
HTML:
<div class="dl-content">
<div class="dl-content-left">
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb1.jpg" alt="">
<h4 class="left">The History of Documentation</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb2.jpg" alt="">
<h4 class="left">Rebuilding Ellis One Brick at a Time</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
<h4 class="left">Title Number 3</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
<div class="content-block">
<img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
<h4 class="left">Title Number 4</h4>
<p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
</div>
</div>
<div class="dl-content-right">
<img src="img/thumbs/ad1.jpg" alt="">
</div>
</div>
CSS:
.dl-content{
width:940px;
margin: 0 auto;
padding: 0 20px;
overflow: hidden;
}
.dl-content-left{
width:618px;
float: left;
}
.dl-content-left .content-block{
width:307px;
float:left;
margin-bottom: 20px;
}
.dl-content-left .content-block img{
width: 139px;
float:left;
margin: 0 8px 0 0;
}
.dl-content-left .content-block p{
float:left;
width:150px;
font-size: 12px;
line-height: 1.4;
}
.dl-content-right{
float:left;
width: 300px;
margin-left: 20px;
}
.dl-content-right img{
width: 300px;
}
I think its to do with the heights of the divs, as a height hasn't been set.
I added a clear div into it, separating the two sets of divs and it works now:
Demo here
You can also set a height on the divs and this would also solve the problem:
Demo here