For some kind of menu I would like a box of 300 pixels width, with the items in it aligned to the right. I came up with the following code which works just fine in IE and Chrome, but not in FF :
<div style="width:300px;" align="left">
<div align="right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
UPDATE : In FF, the images are on the right side of the screen, in stead of aligned right at 300px from the left.
UPDATE 2 : The solution appeared to be text-align...
OK, after a lot of trying out things, I found it myself : text-align does the trick
(although it's aligning images here)
<div style="width:300px; text-align:right;">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
Try that:
<div style="width: 300px;">
<div style="float: right;">
<img src='images/item1.png' />
</div>
</div>
Oh and also, don't use HTML align parameters, use style.
Try using this instead:
<div style="width=300px;">
<div style="float: right">
<img src="images/item1.png"> <br/>
<img src="images/item2.png"> <br/>
<img src="images/item3.png"> <br/>
<img src="images/item4.png"> <br/>
</div>
</div>
try this width : not width =
<div style="width:300px;">
<div style="float: right">
<img src="images/item1.png">
<br />
<img src="images/item2.png">
<br />
<img src="images/item3.png">
<br />
<img src="images/item4.png">
<br />
</div>
</div>
<div style="width:300px;">
<div style="float:right">
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
<img src="images/item1.png" alt="img"/> <br/>
</div>
</div>
Related
I am currently teaching myself HTML / CSS. After some tutorials I am now building my first own project. I try to structure three images and three texts on my page using CSS.
The structure should look like this:
Text - Image
Image - Text
Text - Image.
I tried to position the images with float: right and float: left respectively. But all three images are positioned on the right again and again.
Can you help me? Thank you very much.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div>
<img src=speise.jpg alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div>
<img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div>
<img src="dj.jpg" alt="DJ legt auf" style="float: right">
</div>
</div>
You've floated your images inside divs, by themselves. That's like trying to move to the right inside your clothing. Floated images should have the same parent as the content you want to flow around them.
So just combine the divs. You may even want your images inside the paragraphs.
Also, be sure to use a good editor (or at least run your code through an HTML validator). Either will make structural and semantic mistakes obvious.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
<img src="https://via.placeholder.com/100" alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
<img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left">
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
<img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right">
</div>
</div>
This is happening because you are styling the image while your image resides inside a new div.
Try this code instead
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div style="float: right">
<img src=speise.jpg alt="Speise">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div style="float: left">
<img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div style="float: right">
<img src="dj.jpg" alt="DJ legt auf">
</div>
</div>
do this and it should work you might need to specify the max-width of the divs as well and apply 100% width to the image in case you apply max-width, rest this should be working!
I am trying to create a page with Bootstrap. The idea is create 3 columns on the left show star (links), in center a word "Infilmtrats" in Catalan, and right other stars (other links)
But it deforms both computer, mobile and tablet. I would like to look good in the 3 devices...
Mobile devices in the 2nd column is not centered , and third jumps to the next line ( after the word " infilmtrats " ) .
You know some idea? I'm trying to "float" but no way , I spend my code.
Thank you very much .
CURRENT. http://www.infilmtrats.com/interrogatorios/
YES, SHOULD BE http://oi60.tinypic.com/28b8mu0.jpg
<div class="row">
<div class="pull-left"><br/><br/><br/>
<p><img src="start.gif" alt="estrella" width="52" height="47" class="size-full wp-image-302" /></p>
</div>
<div class="centered" style="text-align: center;">
<h1 style="color: #ffffff;">I<br /> N<br /> T<br /> E<br /> R<br /> R<br /> O<br /> G<br /> A<br /> T<br /> O<br /> R<br /> I<br /> O<br /> S<br /> </h1> </div>
<div class="pull-right">
<p><img src="start.gif" alt="estrella" width="52" height="47" class="aligncenter size-full wp-image-302" /></p>
</div>
You need to add your column divs. Like this:
<div class="row">
<div class="col-sm-4">
<div class="pull-left"> ... <div>
<div>
<div class="col-sm-4">
<div class="centered"> ... <div>
<div>
<div class="col-sm-4">
<div class="pull-right"> ... <div>
<div>
</div>
You need to use the column classes of the grid system. By default there are 12 columns in the grid system. If you want 3 columns then divide 12/3 = 4 to get how wide each column should be.
<div class="row">
<div class="col-xs-4">
Left
</div>
<div class="col-xs-4">
Center
</div>
<div class="col-xs-4">
Right
</div>
</div>
The various sizes that are associated with the columns (xs, sm, md, lg) determine at what point the columns will become full width and begin stacking.
I have three images inside a div that scale according to window size. The div has a width of 60% and is floated left
<div id="display">
<img src="assets/images/angle1.jpg" style="width:35%;height:35%;" />
<img src="assets/images/angle2.jpg" style="width:35%;height:35;" />
<img src="assets/images/angle3.jpg" style="width:60%;height:100%;" />
</div>
Basically I want to maintain this scalability with the images arranged like this:
IMG SETUP http://brycekirk.ca/assets/images/setup.gif
Use nested DIVs to keep the right-side images together:
<div id="display">
<div id="column1" style="width:35%; float:left">
<img src="assets/images/angle1.jpg" /><br/><img src="assets/images/angle2.jpg" />
</div>
<div id="column2" style="width:60%; float:left">
<img src="assets/images/angle3.jpg" />
</div>
</div>
i'm designing with div and span tag & i have created table by using these two tages. I want to set the position of the particular span inside the div . how to do this?
below is my design
<html>
<head></head>
<body>
<div style="margin-left:10px;margin-right:10px;">
<div style="height:30px;">
<span class="name">A.B. Enterprises</span>
<span>(42100001)</span>
<span>OS : Cr.</span>
<span style="float:right; left:0px; top:0px;position:relative;">
<span><img src='C:/Documents and Settings/priyanka/Desktop/BlueColor.gif' alt="" /></span>
<span ><img src='C:/Documents and Settings/priyanka/Desktop/BlueColor.gif' alt="" /></span>
<span><img src='C:/Documents and Settings/priyanka/Desktop/BlueColor.gif' alt="" /></span>
<span><img src='C:/Documents and Settings/priyanka/Desktop/BlueColor.gif' alt="" /></span>
</span>
</div>
<div>
<span>Supriya Dye Chem</span>
<span>Turn Over : Cr.</span>
</div>
<div>
<span>Indrabhan Pandey</span>
<span>(Mumbai1</span><span>,Mumbai1)</span>
</div>
<div><hr /></div>
</div>
</body>
</html>
thanks
<div style="position:relative;">
<span style="position:absolute: top:0px; left:0px;"></span>
</div>
<div class="your_div">
<span style="float:left; left:0px; top:2px;"></span>
</div>
You can set the position playing with 'left' and 'top' values
attached is an image.
I am trying to get the text format as shown at the right-most end. i.e. within the height of the thumbnail (36px) name, time, date have to be shown vertically aligned. I am having problem showing the text vertically aligned. Here's my code -
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div id='name' style="float:right; font-size:11px">Peter</div>
<div id='time' style="float:right;font-size:11px;">19:23</div>
<div id='date' style="float:right;font-size:11px;">23 Dec'10</div>
</div>
</div>
To be accurate, I want the div ids 'name', 'time', 'date' to be aligned like in the image. how?
Also note that the div with id="0" is one of the results, there'll be 10 such in a page all under <div id="sresults">
Here's what you want: http://www.bravegnuworld.com/rjune/test.html
Notice encapsulating the name, etc in a div that is floated right? You have three divs(block elements, they'll automatically stack). Put those inside another div, and you now have a block element with three stacked blocks inside it. You can either use "float:right" or "display:inline-block" to make the div display on the same level. as the rest of the line.
<div id="sresults" style="position:absolute;top:120px; left:36%; background:yellow">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both; background:red">
<div id="content0" style="float:left; font-size:13px; background:blue">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right; background:green">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div style="float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
You can use table instead of div it's seems more logical to me:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<table id="meta0" style="float:right;">
<tr>
<td>
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"/>
</td>
<td style="text-align:right;">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</td>
</tr>
</table>
</div>
</div>
UPD
Here is code with divs:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="id0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts' style="float: left;"/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter" style="float: left;"/>
<div style="text-align:right; float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
</div>