I am working on a voting system that shows what people have been voting for, showing the names of the Movies. I have never had this problem before and can't find anything about it online.
Outlined by the red box is the problem, a random space for the first value that is printed.
Here is the code for the text
echo "<br><form method='POST' action='vote.php'>
<font size='5'><center>".$row['moviename']."</center></font>
</center>
And here is the code for the votes bar
.wrap {
margin-right: 500px;
margin-left: 500px;
width: auto;
border: 1px solid #000000;
border-radius: 3px;
background-color: #000000;
padding: 2px;
}
.bar {
background: orange;
height: 24px;
border-radius: 2px;
}
Sorry if this is a stupid question... If you need any more code please ask.
Thanks in advance.
Related
I have some problems with a button arrangement where I have several buttons forming a grid.
The problem I am encountering is, that as soon as there is more than one line of text inside the button it gets shifted downwards.
I think you see what the problem is.
<button class="boxed" dummy="0" name="x" type="submit" value="x">
SEGEBERGER ZTG.DO
</button>
corresponding CSS
button {
background:#fff;
border: 1px solid #c1c1c1;
padding-left:11px;
padding-right:11px;
height:29px;
margin-top: 5px;
white-space: normal;
}
.boxed {
margin-left:1px;
padding-top:10px;
padding-left:10px;
width:100%;
max-width:150px;
height:150px;
font-size: 10pt;
word-break: break-all;
}
I looked around but did not find anything that fixed it.
https://jsfiddle.net/k1vvsx2h/
Hope someone has a hint on how to fix this.
Have a good one :)
Adding a float:left will fix this issue.
.boxed {
float: left;
margin-left: 1px;
padding-top: 10px;
padding-left: 10px;
width: 100%;
max-width: 150px;
height: 150px;
margin-right: 5px;
font-size: 10pt;
word-break: break-all;
}
button {
background: #fff;
border: 1px solid #c1c1c1;
padding-left: 11px;
padding-right: 11px;
height: 29px;
margin-top: 5px;
white-space: normal;
}
Here also a jsFiddle for you: https://jsfiddle.net/hb8ydyba/1/. Make sure you're using a clearfix with this solution.
If you're looking for a more flexible solution maybe a CSS Framework like Bootstrap or UIKit and their Gridsystems will work out well for you.
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/
Hi basically I am new to css etc so my form may be awful, however last night it was appearing abosloutely fine....I haven't touched it, and on loading the site this morning it is not appearing correctly.
so here is my jsfiddle,
can somebody wise please explain why its changed over night? I am sure I haven't touched it.
thanks,
All you need to do is add clear: left to:
#stylized label {
clear: left;
display: block;
float: left;
font-weight: bold;
padding-bottom: 12px;
padding-left: 2px;
padding-right: 2px;
padding-top: 3px;
text-align: right;
width: 180px;
}
http://jsfiddle.net/userdude/7Zc6u/5/
What's happening is the edge of the password label is getting caught on the edge of the username label.
replacing padding
padding: 5px 3px 2px 12px; to #stylized label solves the problem
Or use
clear:left; in #stylized label
I'm trying to get my name and trip input fields to line, but they're all over the place.
http://prime.programming-designs.com/test_forum/viewboard.php?board=0
#formdiv{
margin: auto;
text-align: left;
width: 30%;
}
.fielddiv1{
background-color: #222222;
border: 2px solid #333333;
vertical-align: middle;
width: 45%;
float: left;
}
.fielddiv2{
background-color: #222222;
border: 2px solid #333333;
vertical-align: middle;
width: 100%;
}
.fieldtext{
width: 100%;
background-color: #333333;
}
Remove the <br /> that's between those two fielddiv1 div's
You have a <br> between the divs that contain them.
Wrap both of them (the two divs with fielddiv1 class) into a single div. And also delete the line break in between them.