Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Mine html (css inside) code looks like this:
<body style="color: #25670c; margin: 0 0 0 0; padding: 0 0 0 0; font-family : Times New Roman; font-size : 14px; text-align: center;">
<div style="height: 96px; width: 985px;"><a href="www.one.lt">
<img border="0" src="images/graphic/header.png" width="985" height="96" alt="header" title="DigiSpot eBay store" /></a></div>
<div style="height: 41px; width: 985px;">
<img border="0" src="/images/graphic/meniu.png" alt="DigiSpot meniu" width="985" height="41" usemap="#mapas" />
<map name="mapas">
<area shape="rect" coords="56,0,0,41" href="www.one.lt" alt="DigiSpot eBay store home" title="DigiSpot eBay store home">
<area shape="rect" coords="539,0,400,41" href="www.one.lt" alt="About Digispot" title="About DigiSpot">
<area shape="rect" coords="699,0,539,41" href="www.one.lt" alt="Delivery information" title="Delivery information">
<area shape="rect" coords="845,0,699,41" href="www.one.lt" alt="Returns information" title="Returns information">
<area shape="rect" coords="985,0,845,41" href="www.one.lt" alt="Contacts information" title="Contacts information">
</map> </div>
<div style="position:relative">
<div style="float:left; width: 663px; height:100px; text-align: center; background-color:#d6d6a4;"><img border="0" src="/images/graphic/description.png" width="232" height="81"><br /><div style="text-align: left; margin-left: 10;">[[Description]]</div></div>
<div style="float:left; width: 324px; height:100px; text-align: center; ">
<div style="width: 324px; color: #ffffff; background-color:#6b8861; font-size : 34px;">[[Title]]</div>
<div style="width: 324px; color: #ffffff; background-color:#6b8861;"><div style="width: 320px; margin: 2 2 2 2; background-color:#ffffff;">[[Picture1]]</div><div style="width: 300px; height: 2px; background-color:#6b8861; color: #6b8861;"></div></div>
<div style="width: 324px; color: #801010; font-size : 40px; background-color:#d6d6a4;">Price: [[BuyItNowPrice]]</div>
</div>
</div>
<div style="clear: both; text-align: center; width:985px; margin: 0 auto;"><img border="0" src="graphic/buttom.png" width="524" height="42"></div>
</body>
The result is not as I wish and looks like this:
Bigger image on push here
Here is stroked problematic areas:
Bigger image on push here
I want to all this page would be aligned to center, I used in body text align, but its not helping.
The div in the right should be in center of page bottom, I dont know why he choosing such position and some part of the image is under "Price" div.
Is it posible to do that description div in left and in right price and other info div would always have same height which is not fixed, because I want to have that background of those div's not separated in bottom.
edit: push images to make them bigger.
See this demo:
http://jsbin.com/uhakak/7/edit
First, you should wrap all your content into some div which will make it in center:
and css for it:
#mainContent {
width:945px;
margin:0 auto;
}
That way you will put everything in center of a page. text-align:center works for text only (inline elements, actually text is just a separate case of inline elements). Divs are block elements and text-align:center will not affect them.
Second. Not sure why you have that div on the right side, but try to add overflow hidden to your div with postion:relative which holds description, title and price. I see no problem with it.
Third, that is little tricky to make both divs have the same height, but as your point is simple background color, you may set background for parent div. That with overflow:hidden (actually, as I can see position:relative is not needed there at all). Demo above should show how it works. I've removed height:100px; there
Remove float:left of the every element you want to center. And then add margin: 0 auto to every element you want to center.
edit: and try to learn how to style elements not inline. It will make your life much easier.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#mypage{margin: 0 auto;
width: 950px;}
.main{margin: 0 auto;
text-align: center;}
.desc{width: 700px;
background-color:#d6d6a4;
float: left;}
.text{float: right;}
</style>
</head>
<body id="mypage">
<div class="main">
<div class="header">
<img src="http://www.gvcdigital.co.uk/images/graphic/header.png" alt="header" title="DigiSpot eBay store">
</div>
<div class="menu">
<img src="http://www.gvcdigital.co.uk/images/graphic/meniu.png" alt="DigiSpot meniu" usemap="#mapas"/>
</div>
<div class="desc">
<img src="http://www.gvcdigital.co.uk/images/graphic/description.png">
</div>
<div class="text">[[Description]]</div><br>
<div class="text">[[Title]]</div><br>
<div class="text">[[Picture1]]</div><br>
<div class="text">Price: [[BuyItNowPrice]]</div>
<img src="graphic/buttom.png">
</div>
</body>
</html>
Related
New to writing code and need help stacking images on top of one another.
I am trying to stack an image on top of another (that I wish to have as my background) with a right align.
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
<img src="website/bg-services.jpg" alt="Greenteriors Moss Art" size="cover" width="100%" height="100%" id="services-background">
</section>
</div>
I lack the CSS prowess to even attempt to write the code. What currently happens is the img-services stacks on top of bg-services with a right align. I need the first image stacked on top of the second.
Appreciate any help.
here's a jsfiddle for an identical project with more images: http://jsfiddle.net/kizu/4RPFa/4570/
jsfiddle is a great free tool to play around with code and see how changes work out
so you'd be using an inline-block helper and setting height to: 100% and vertical-align: middle on both elements.
<div class="container-fluid" id="special">
<section id="fourth">
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
</section>
</div>
i've added extra div's around your elements. now you just need to add this to the css file to tell it what to do with those new divs:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
you'll want to play around to make it look how you want. change the height and width. prob remove the border
#fourth { background-image: url('website/bg-services.jpg'); background-size: cover; }
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
</section>
</div>
I'm a web design student and still haven't gotten the hang of everything yet. I've been playing with this for awhile and I'm trying to make it work but one specific page on my website isn't working. Can't seem to figure out why, hence why I said "maybe" html, since im not completely sure that it's a css issue.
Here is my site and the specific page I'm having issue with: http://phlbombers.com/teamlist.html
First problem is I want the "This Season" section to be up much farther. If you click any of the other tabs, you will see that that section is in the same spot in all other pages, and you can see it just as soon as you click on the page. Sadly that is not the case on the "team" page.
Second problem is with the pictures. I want the first two pics to be stacked, exactly like they are. Problem occur's when I get to pictures three through six. I want those four pictures to be stacked 2 x 2. Is it possible to do that with a class setup, or would I need to change to a ID selector?
HTML
<div id="col3">
<h2>End of 2014/2015 Season playoff's pic</h2>
<div class="img">
<a target="_blank" href="images/IMG957247.jpg">
<img src="images/IMG957247.jpg" alt="2014/2015 Season" width="450" height="300">
</a>
<div class="desc">2014/2015 Season</div>
</div>
<h2>Bomber's 2014/2015 Admiral game outing</h2>
<div class="img">
<a target="_blank" href="images/IMG_0400.jpg">
<img src="images/IMG_0400.jpg" alt="Bomber's Admiral game outing" width="450" height="300">
</a>
<div class="desc">Bomber's Admiral game outing</div>
</div>
<h2>2015 Bomber's golf outing pictures</h2>
<div class="img">
<a target="_blank" href="images/golf.jpg">
<img src="images/golf.jpg" alt="Winners of the 2015 gold outing" width="450" height="300">
</a>
<div class="desc">Winners of the 2015 gold outing</div>
</div>
<div class="img">
<a target="_blank" href="images/golf2.jpg">
<img src="images/golf2.jpg" alt="2015 golf outing" width="450" height="300">
</a>
<div class="desc">2015 golf outing</div>
</div>
<div class="img">
<a target="_blank" href="images/golf3.jpg">
<img src="images/golf3.jpg" alt="2015 golf outing" width="450" height="300">
</a>
<div class="desc">2015 golf outing</div>
</div>
<div class="img">
<a target="_blank" href="images/golf4.jpg">
<img src="images/golf4.jpg" alt="2015 golf outing" width="450" height="300">
</a>
<div class="desc">2015 golf outing</div>
</div>
</div>
with CSS:
div.img { border: 1px solid #ccc; float: left; width: 300px; clear: both; margin-bottom: 10px; }
div.img:hover { border: 1px solid #777; }
div.img img { width: 100%; height: auto; }
div.desc { padding: 15px; text-align: center; }
col3 h2 {
padding-bottom: 10px;
font-size: 2em;
border-top: 1px solid;
border-left: 5px solid;
padding-top: 10px;
padding-left: 5px;
Float: left;
border-color: #A28B84;
color: #C2443D;
margin-bottom: 20px;
clear: both;
}
I'm sure im leaving some info that is needed out, which is why I linked the page itself. If need be, you can always inspect it.
Thank you!
First problem
You're missing the following in your css:
.col3{
float: left;
width: 600px;
}
Without these, your .col3 would just take up the entire page width, and your Season box would place itself below it.
Second problem
Create a containing div around each post/gallery item, so your structure looks like this:
<div class="post">
<h2>Title</h2>
<div class="img">...</img>
<div class="img">...</img>
</div>
This will give the img divs a place to float in. Now just remove the clear: both from your .img class since this negates your float property.
Also remember to change the width of your .img to 298px, because right now the div is 302px wide in total (300px width + 2px border) and will not fit 2x2.
I suggest reading up on how floats work to better grasp the concept and how to use them correctly.
I am using a 2x2 grid on a wordpress page to display some images that change during a mouseover.
Using a 2 column 1 row grid, the images are perfectly horizontally aligned, but when I add a second row the bottom two images get out of alignment.
I put this code into my CSS stylesheet
.grid {
width: 704px;
margin: auto;
vertical-align: middle;
}
.grid-m1 {
float: left;
width: 22px;
height: 1px;
}
.grid-c1 {
float: left;
width: 320px;
}
.grid-m2 {
float: left;
width: 22px;
height: 1px;
}
.grid-c2 {
float: left;
width: 320px;
}
Then in my new page I put in:
<div class="grid">
<p class="grid-m1"></p>
<p class="grid-c1"><a id="top left" href="top left">
<img title="Top Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png" />
</a>
</p>
<p class="grid-m2"></p>
<p class="grid-c2"><a id="top right" href="top right">
<img title="Top Right" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png" />
</a>
</p>
</div>
<div class="grid">
<p class="grid-m1"></p>
<p class="grid-c1"><a id="bottom left" href="bottom left">
<img title="Bottom Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png" />
</a>
</p>
<p class="grid-m2"></p>
<p class="grid-c2">
<img src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/focus-group.png" />
</p>
</div>
http://jsfiddle.net/isherwood/DZqQJ/
As you can see by looking at my site: quickfoqus.com/studies/test I cannot get these 4 images to line up properly on the grid.
I tried vertical-align tags on my css but this did not seem to work.
Thanks for the help!
Your plain gradient images have empty space at the top and side(s). Your people image does not. Here's the layout with margins applied to that image to get things lined up:
http://jsfiddle.net/isherwood/DZqQJ/1/
<img src="http://.../focus-group.png" style="margin: 10px 0 0 15px;" />
How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
http://jsfiddle.net/MgcDU/4137/
HTML:
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-last">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
</div>
</div>
CSS:
.small-video-section {
height: 134px;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
display: inline-block;
}
.thumbnail-last {
width: 220px;
margin-top: 15px;
display: block;
}
Thanks. :)
You could use float: left or float: right
img {float: left;}
Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.
You can position them absolutely
img {position: absolute;}
and then position one by one using left and right or margins
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
Changing display:block to display:inline-block in your .thumbnail-last rule will do it.
try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break
Try this code :- Use only float:left
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-last" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
</div>
</div>
All your code are ok. But , I have only added style in HTML part.
Update link :-
http://jsfiddle.net/MgcDU/4148/
Its working fine.
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form
I'll preface this question by stating I have historically used tables for my HTML formatting and am fairly good at getting it to look the way I'd like... I am aware that tables are meant for "tabular data" and not formatting. I always get a bit frustrated when I try to do it the "right way", so today I am seeking some help.
<div style="width: 90%;">
<div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
<a href="a.html" style="margin: auto 0px auto 0px">
<img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
</a>
A Link
</div>
<div style="width: 50%; float: right;">
B Link
</div>
</div>
As you can see from my attempts above, I'd like for the image link and the 2 text links to all line up along the same horizontal line (i.e. text links at the center of the image). Depending on how wide the parent div is I'd like the A img/link and B link a reasonable distance from one another. I'd also like for the divs with the "float: left" and "float: right" styles to not extend south beyond the border of the parent div (for some reason it is doing that to me in firefox with the above code).
Please help set me straight? Am I the only one who finds "the right way" of formatting things to be a big pain in the rear? I'm hoping I'm missing something big that if corrected will get me going down the right path.
===============
Update, thanks for the comments, I went to jsfiddle and fiddled a table-based solution:
<table style="width: 90%; margin: 0px auto 0px auto;">
<tr>
<td style="width: 50%;"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
<td style=""><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
</tr>
</table>
Yields the desired layout:
I think it must be my misunderstanding/usage of floats and positions that always stings me when I try div-based layouts.
Personally I'd do it like this - http://jsfiddle.net/spacebeers/nWNPm/7/
.magLink {
list-style: none;
height: 50px;
float: left;
margin: 0 50px 0 0;
}
.magLink li {
float: left;
height: 50px;
display: table;
}
.magLink li a {
height: 50px;
display: table-cell;
vertical-align: middle;
}
<ul class="magLink">
<li><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></li>
<li>Link A</li>
</ul>
You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I've set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.
EDIT:
JSFiddle's running pretty badly so here's an image of the output in case it's not working.
Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.
From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?
Edit
<div style="width: 90%;">
<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
A Link
</div>
<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
B Link
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>
</div>
That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)