I'm trying to position the contents:
g_image5 which I use it like a background of the entire wrapper
image7 which is the banner over the g_image5
text3 its a paragraph and I have align it in the middle of the wrapper
On my resolution it shows up on the middle but on a higher resolution for example it shows up in the left. I think its because when I aligned it with left:28,5% it goes after the html size which is 100% width.
So my question is: how should I write on the wrapper so that the content to be positioned after it?
html
{
width:100%;
height:100%;
overflow-y:auto;
}
<div id="wrapper" width=100% z-index:-1>
<div id="g_image5" style="position:absolute; overflow:hidden; left: 23%; top: 18%;
width:55%; z-index:0"><img src="images/content2.jpg" alt="" title="" border=0
width=100% height=150%></div>
<div id="image7" style="position:absolute; overflow:hidden; left:38%; top:20%;
width:25%; height:13%; z-index:3"><img src="images/2.png" alt="" title="" border=0
width=100% height=100%></div>
<div id="text3" style="position:absolute; overflow:hidden; left:28.5%; top:40%;
width:50%; height:20%; z-index:3">
<div class="wpmd">
<div><font face="Tahoma" class="ws13">Here is a paragraph and here's also the problem</font></div>
</div>
</div>
</div>
in your case the problem is with this combination:
#g_image5 {
width: 55%;
left: 23%;
top: 18%;
}
Instead you should do something like this, which will center all elements inside your wrapper and text inside horizontally:
#wrapper {
text-align: center;
}
then to have a scaleable image, just do something along these lines:
#g_image5 {
width: 70%;
height: auto;
}
An alternative is to avoid img overall and have a picture as a background in CSS:
#g_image5 {
background: url(/*path to your img */) no-repeat center center;
}
Related
I want to center these 4 images. Horizontally it is working but vertically it won't work. Does anybody knows how to solve this problem? At the moment I've got a black header/footer section with 4 images centered horizontally. Everything is scalable but not the height of the images.
Am doing it right?
HTML:
<section>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</section>
CSS:
body {
margin:0;
padding:0;
max-width: 100%;
max-height:100%;
}
section {
position:absolute;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
width:12.5%;
float:left;
margin-left:10%;
}
Assuming the width of the image equals the height of the image (like the code you gave has), you can just use margin-top of 50% - imageHeight. That would look like
section img {
width:12.5%;
margin-top:32.5%;
float:left;
margin-left:10%;
}
Demo
If they're not, you can use this pure CSS approach
I think its easier to wrap the images in a container and then center the container in the container's parent, in this case you could use an Article tag to wrap the images an then center that article in the section like this
HTML
<section>
<article>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</article>
</section>
CSS
html, body {
height: 100%;
width: 100%;
}
section {
top: 5%;
left: 0%;
width: 100%;
height: 90%;
/* strech */
overflow: hidden;
}
article {
width:80%;
height:40%; /* change this to set height */
/* CSS absolute center begin */
border: 2px solid #0000ff;
margin: auto;
position: absolute;
display: inline-block;
top: 0;
bottom: 0;
left:0;
right:0;
/* CSS absolute center end*/
}
.pic {
position: relative;
float: left;
width: 12.5%;
height: 100%;
margin-left: 10%;
}
.pic img{
position: relative;
width:100%;
height:100%;
}
Hope it help you
You can give the section position:relative; and then do a trick with the images.
The sample below makes them centered of the section, if you want to have the images spread out, but vertically aligned, you need to do this trick on the containing element (like a dive around the images in the section:
section {
position:relative;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
/*width:12.5%;
float:left;
margin-left:10%;*/
position:absolute;
top:50%;
margin-top:-25%;/* should be half the height of the image */
left:50%;
margin-left:-25%;/* should be half the width of the image */
}
how can i align my paragraph as shown in the following image
.
I need to show a newspaper kind of thing in which this should be included.
The following is the html code i'm using
<div class="left"></div>
<div class="right"></div>
<div class="myImage"><img src="question.png"/></div>
and the css code is this
*{
margin:0;
padding:0;
}
.right,.left{
height:300px;
width:200px;
float:left;
background:red;
margin:5px;
}
.myImage img{
width:100px;
height:100px;
}
.myImage{
clear:both;
position:absolute;
top:100px;
left:150px;
}
Create the image element on the left side, floating to the right of the text. Misplace it to the right, half the image's width with "margin". Then, on the right div, create the same effect using a blank div, but inverted. Float the div to the left side of the text and misplace it to the left by half the width. Like this:
<style>
.right, .left
{
width: 200px;
height: 300px;
float:left;
}
#real-img
{
width: 100px;
height: 100px;
float: right;
margin-right: -50px; /* half the width */
margin-top: 125px; /* vertical align considering page height minus img half height */
}
#fake-img
{
width:100px;
height:100px;
float:left;
margin-left: -50px;
margin-top: 125px;
}
</style>
And the html:
<div class="left">
<img src="imgurl" id="real-img" />
[CONTENT_TEXT]
</div>
<div class="right">
<div id="fake-img"></div>
[CONTENT_TEXT]
</div>
All of this, of course, considering you hard-code all the sizes.
I want to have a container with a set width and height.
Within that container I have:
a vertically and horizontally centered text
a few vertically centered icons on the left side of the container
a few vertically centered icons on the right side of the container
My test code:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
display:inline-block;
font-size:18px;
text-align:center;
}
.iconsleft, .iconsright {
display:inline-block;
}
.iconsright {
right:0;
}
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">centered text</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
</div>
(I took a random icon from google for this test)
This is what my test code looks like and what it should look like:
http://imgur.com/0QfcQnF
CodePen
I try to avoid floats:
http://jsfiddle.net/techsin/Gz4nv/1/
Things I did:
Inserted Blank content which has its type set to inline-block (by default content added by css content:'etc' is inline element), and make it 100 percent the height of container, thus stretching the line height to height of container. So when i would vertical-align something it would see whole height of container as something to get aligned with.
Declare container position as relative. Which would help in positioning icons absolutely. Because absolute positioning refers to first parent element that has been explicitly positioned relatively. position:relative.
Than simply put left:0; on left container and right:0; on right one.
make them both move down 50% the height of container.
Then make them move them up 1/4th the height of container to bring them in center vertically by giving them negative margin.
Demo
If you want the icons to go to one side, you should tell them to float in that direction.
The text isn't centered because it only takes up as much space as it needs. Explicitly setting a width, will tell it to take up more space, and thus allow the text to be centered. This could be in pixels or percentages. For example if you have a container with width A and four images with width B (each), you could set the width to A - 4B pixels.
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright {
display:block;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
Just float the two side <div>s to left and right, and put the right <div> before the centered <div> in the HTML structure.
Demo here
<style>
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
font-size:18px;
text-align:center;
}
.iconsleft {float: left;}
.iconsright {float: right;}
</style>
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">Centered demo text</div>
</div>
By changing the container height and giving it some bottom padding, you can make the full box vertically centered.
Bonus demo
Change height: 70px; in .container to this:
height: 50px;
padding-top: 20px;
text-align: center needs to be set on the parent block, not the centered block, if you have display: inline-block.
Also vertical-align:middle; won't do you any good, unless you're in a table cell (or a div styled like one). If you want "real" vertical centering on IE7+ use good ol' tables, in conjnction with vertical-align: middle. Or just fake it with margins.
For .iconsleft and .iconsright use you might want to try floats, or position: absolute;
CSS:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
margin:auto;
text-align:center;
}
.text {
font-size:18px;
margin-top: 22px;
}
.iconsleft, .iconsright {
margin: 20px 10px 0;
}
.iconsleft {
float: left;
}
.iconsright {
float: right;
}
HTML (floats need to be written before the content):
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="text">centered text</div>
</div>
Demo with vertical and horizontal align.
I used a simple grid system to align everything up - CSS:
.grid {
width:200px;
height:70px;
float:left;
}
HTML:
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
<div class="grid text">centered text</div>
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
I know this may not be the the perfect way but I think this hack might help:
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright, .text {
display:inline-block;
margin-top:20px;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
I have a markup that looks like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" />
<div class="YellowExclaimIcon iconsBlack"></div>
</div>
What I want to achieve is below:
Meaning that the image should always be placed center (Both horizontal and vertical) in the parent div and the warning icon should on top of the image with a margin of 5 to the right and to the bottom.
Another thing to note is that, the image width and height is not always the same, but the position for the warning icon should always be the correct place.
The YellowExclaimIcon class contains a background image, but can be altered to a image if need be. Something to consider is the image also has a max-width and max-height.
I tried with the answer in this thread CSS Help - div over image but I could't get it to work with the centering.
if the image width & height are variable, you can only achieve this if you change the markup, something like this:
<style type="text/css">
div.container {
width:150px; height:250px; display:table-cell; vertical-align:middle;
text-align:center; background-color:#ededed}
div.image {
position:relative; display:inline-block; }
div.image img {
display:block; }
div.YellowExclaimIcon {
position:absolute; width:80px; height:80px; bottom:5px; right:5px;
background:transparent url(your-icon.png) no-repeat 100% 100%}
</style>
<div class="container">
<div class="image">
<img src="Image.jpg" alt="" />
<div class="YellowExclaimIcon"></div>
</div>
</div>
The sample above will always horizontally & vertically align the image in the center, with an icon in the bottom right corner, 5px margin.
Check a working sample: http://jsfiddle.net/Q9uhV/
Use position:relative to outer div and absolute to inner div
HTML
<div class="outer">
<div class="YellowExclaimIcon"></div>
</div>
CSS
.outer{
width: 150px; height: 250px;
border:solid red 1px;
position:relative;
vertical-align:middle;
background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center;
}
.outer img{text-align:center; vertical-align:middle}
.YellowExclaimIcon{
position:absolute;
width:100%;
height:100%;
top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%;
}
DEMO
You need to use z-index and some positioning like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" style="z-index:-1" />
<div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div>
</div>
..for example, set your margins to what you need.
Make your warning image absolute so you can position it over the other image at a specified location.
HTML:
<div class="container">
<img src="penguin.png" />
<img class="warning" src="warning.png" />
</div>
CSS:
.warning {
position:absolute;
left:80px;
top:80px
}
See this jsFiddle for a demo.
In my page, the top left image which is logo2.jpg shifts to right, and I want it to be at the same line of menu that is below it. How can I do that?
The page is here, if it helps:
http://www.dilyurdu.com
#logo {
margin:0 auto; width: 975px; position:relative;
}
#top {
position:relative; top:0px; left:0px; width:100%; height:95px;background:url("vocab_dosyalar/back2.jpg") top repeat-x;
}
#logoicerik {
position:absolute; top:2px;
}
#logoicerik2 {
position:absolute; top:2px; left:357px;
}
<div id="top">
<div id="logo" >
<div id="logoicerik"><img src="vocab_dosyalar/logo2.jpg" alt="easylang" style="border:0px;"/></div>
<div id="logoicerik2"><img src="vocab_dosyalar/slogan.jpg" alt="the easiest way to learn english"/></div>
<div class="header-info" style=" margin-right:1px; margin-top:15px" ></div>
</div>
</div>
your container class has width: 960px but your wraper(sic) class has width: 990px
so you need to make sure they both have the same width: I'd recommend making both 990px by changing the width of container
.container {
WIDTH: 990px;
}