I have a link after an image in my xhtml. The browser automatically puts a return character after the image so that the link is below the image. I want the link to be beside the image. How do I modify the CSS/XHTML for this?
PHP generates it like this(example code)
echo "<img class = \"c\" src=\"http:\/\/www.facebook.com\/favicon.ico\" alt=\"\"\/>";
echo "<a name = \"a1\" class = \"b\" href = \"$ass_array[url]\">$ass_array[name]</a>";
CSS
img.c
{
display:??;
}
a.b
{
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
width:100%;
border-bottom:1px solid #cccccc;
}
See: http://jsfiddle.net/thirtydot/vgnAa/
CSS:
.c {
display: block;
float: left;
margin-top: 4px;
margin-right: 4px;
}
.b {
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
border-bottom:1px solid #cccccc;
overflow: hidden;
}
Either float: left, float: right depending which side you want the link to be. Apply that to both, and make sure to have a clear div after.
This way you can still have that display:block on .b.
"float:left;" for both elements will work
Related
Ok. Here is my problem. Regardless when i do my while loop to get my list elements out to the page, my images wont center. I have tried using divs and classes but nope. I have tried closing the tags and using html and opening the PHP tags but no. Here is the code. Help plz.
<?php
while($row = mysqli_fetch_array($result))
{
$id = $row['id'];
$name = $row['name'];
$desc = $row['longDesc'];
$cost = $row['cost'];
$qty = $row['quantity'];
$img = $row['imageFilename'];
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
}
?>
Here is the css:
ul#items li{
color: white;
padding: 10px;
display: block;
font-family: 'Alef';
height: 180px;
text-align: center;
width: 150px;
vertical-align: middle;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
display: inline-block;
margin: 10px;
}
ul#items li:hover{
border: 1px solid #8E8E8E;
}
ul#items img{
margin-top: 15px;
display: block;
position: absolute;
border: 1px solid black;
max-width:149px;
height: 118px;
width: fit-content;
}
Help please.
IMAGE OF PROBLEM:
http://i.stack.imgur.com/arzL0.png
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
You're not center'ing the 'img' tag in your code. Try this instead:
echo "<a href='paintings.php?id=$id'><li><center><img src='../../_/images/paintings/$img'><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
There are many places where your HTML could/should be improved. A lot of it depends on context we don't have, which is understandable, but doesn't make it easy to give you a complete answer.
To make it work and still look like your screenshot, I would first:
Move the anchor tags into the list item
Remove any IDs that are within loops that do not change per loop iteration. An id is a unique identifier. This doesn't have anything to do with your question, but is important.
Then refer to this (INCOMPLETE) fiddle to get started:http://jsfiddle.net/aNgcb/
The css might look something like this:
ul#items {
list-style-type:none;
overflow:hidden;
}
ul#items li {
color: white;
padding: 10px;
font-family:'Alef';
height: 180px;
text-align: center;
width: 150px;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
float: left;
margin: 10px;
}
ul#items li:hover {
border: 1px solid #8E8E8E;
}
ul#items img {
border: 1px solid black;
height: 118px;
max-width: 100%;
}
You can't center a "block" element with text-align: center;
You can try making the img display: inline-block; or just leave them at the default inline.
display: inline-block;
There is no problem in the php, the problem its with css. try putting a div there and make it margin-left: auto and margin-right:auto.
If you want a good answer, try posting a jsfiddle example. www.jsfiddle.com
for some reason the text in my div doesn't go to the next line, i've tried several different css elements which don't seem to work.... word-wrap:break word, just jumbles the letters...
what i want is for one there is an extra word it goes down to the next line like it's supposed to
this is the div it's in
#top7 {
width: 150px;
height:auto;
margin: 5px;
display: block;
float: left;
word-wrap:break-word;
}
text that it's in
#p6 {
font-family: Myriad Pro;
margin: 1px;
font-size: 22px;
background-color:#540f45;
padding: 5px 5px 3px 4px;
margin:4px;
}
a {
text-decoration: none;
color: white;
text-align: right;
font-family: Myriad Pro;
}
here is the php function that retrieves the data from the database
<p id='p6'><?php echo "<a href='' "</a>"; ?></p>
this is all wrapped in these two id's
body {
background:#603e4f;
display: block;
}
#foursquare {
background-color:#603e4f; width: 290px;
display: block;
position: absolute;
}
There's no white space in the generated code, add some between elements (and not )
<p6 id="a2"><a href=http://classm8.net/retrieveclasslist.php?className=MATH100>MATH100</p6><p6 id="a2"><a href=http://classm8.net/retrieveclasslist.php?className=HINF200>HINF200</p6>
You have to use "display:flex" with word-wrap.
#top7 {
word-wrap: break-word;
display:flex;
}
Create a proper class and get rid of the p6 element. Obviously you'd use your database generated HTML. I just used your values as an example for the fiddle. Also since you're wrapping the elements in a p tag anyway the word break is pointless unless you expect data to be too long for a single tag. Paragraphs break to a new line automatically.
<div id="top7">
<p class="six">CSC110</p>
<p class="six">MATH100</p>
<p class="six">HINF130</p>
<p class="six">CSC110</p>
<p class="six">HINF200</p>
</div>
.six {
font-family: Myriad Pro;
margin: 1px;
font-size: 22px;
background-color:#540f45;
padding: 5px 5px 3px 4px;
margin:4px;
}
http://jsfiddle.net/calder12/5crqT/
I wonder whether someone may be able to help me please.
I'm using Aurigma Image Uploader and FancyBox to produce this gallery page. The problem I'm having is that the images are positioned to go vertically down the page, whereas I would prefer them to go horizontally across the page, creating separate rows of images, one underneath the other.
I appreciate that some may not know anything about the Aurigma package, but I think I'm right in saying that 'Fancybox' is a little more widely used.
I just wondered whether someone could perhaps provide somne guidance please on the settings I would need to change within the Fancybox script so that the images are positioned horizontally rather than vertically.
Many thanks
.ccs file extract
.gallery-image-list { padding: 0; list-style-type: none; }
.gallery-image-list .item { display: inline-block; vertical-align: top; margin: 5px; padding: 15px; white-space: nowrap; width: 150px; float:left; }
.gallery-image-list .wide-item { width: 250px; }
.gallery-image-list .item .preview { display: inline-block; vertical-align: top; }
.gallery-image-list .item .data { margin: 5px; padding: 5px; list-style-type: none; display: inline-block; vertical-align: top; font-size: 95%; }
.gallery-image-list .item .data li { margin-bottom: 5px; }
I think what you want is to add float:left; to your item class in css.
I am creating an e-commerce website. While showing discount box, the image of the item is shifted to the left (image below). I want the discount box (blue color) on top of the item class. Can anyone help me with this?
CSS file
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
float:left;
border:1px solid red;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
float:right;
margin-right:30px;
margin-top:10px;
}
HTML File
<div class="item">
<img src="items/1/s/a.jpg"/>
<div class="discount">
50% discount
</div>
</div>
My example -- the blue box is not overlapping the image. Instead it displaces the image.
I want like this: in which discount box overlaps the image/CSS class
You could use z-index and absolute positioning on the top div. Something like:
div.discount
{
width:30px;
position: absolute;
z-index: 10;
top: 8px;
right: 8px;
height:30px;
border:1px solid blue;
}
You could also use percentages instead of px in the top and right to make it a little more flexible.
Edit: You will also have to add position: relative to div.item (absolute position applies based on the closest containing element with a position applied).
z-index is not strictly necessary as long as the thing you want on top appears before the thing on the bottom in the code. I sometimes like to put it in there just in case things get moved around later.
Try positioning the discount label absolute within the item div
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
border:1px solid red;
position :relative;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
position: absolute;
top: 20px;
left: 20px;
}
div.item { position:relative; }
div.discount { position:absolute; top:-5px; left: -5px; }
You can use absolute positioning to place the blue box on top, just make sure that the parent element is set to position:relative.
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
float:left;
border:1px solid red;
position:relative;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
position:absolute;
right:30px;
top:10px;
}
This is something quick I made up, should work for you: JsFiddle Demo
Hey guys, I have this piece of code:
while($uno=mysql_fetch_assoc($results)) {
echo '<div class="wcapt"><a class="neutral" href="../images.php?id=' . $uno['id'] . '"><img class="pad" src="'. $uno['thumbs'].'" border="0" /></a><br/><center><p>'.$uno['name'].'</p></center></div>';
}
And all the images I link to have exactly the same size. Here's the Mainstyles.css
div.wcapt
{
border: 1px solid green;
float: left;
padding: 0;
margin: 3px;
font: 11px/1.4em Arial, sans-serif;
color: gray;
}
img.pad
{
padding: 5px;
}
a.neutral
{
display: inline;
font-weight: normal;
text-transform: none;
background-color: transparent;
color: white;
text-decoration: none;
}
The problem is that Firefox adds some extra padding to the first image, and only the first image. And this is really annoying. Here's a screenshot of the page:
that's why it's recommended to use a "reset" css... so you wont have this type of inconsistencies between browsers.
Try using a reset css and if the problem remains then it's not the browsers fault =)
Good luck
have you tried targetting the selector more explicitly using..
div.wcapt img {
padding: 5px;
}
You could then remove the .pad class completely
Try adding a pseudo selector more information here
http://www.w3schools.com/CSS/css_pseudo_classes.asp
Note you need to set the doctype to do this
div.wcapt img:first-child {
padding: 2px;
}
I used Firebug and figured out the problem, thanks guys, and I had to answer my question since the answer was in the comments and I can't accept comment answers.