<div id="broadcast">
<div class="broadcast_element">
<div class="broadcast_username"><?php echo $row[0]?>:</div>
<div class="broadcast_broadcast"><?php echo $row[2];?></div>
</div>
</div>
Simplified CSS:
.broadcast_element
{
width: 100%;
}
\#broadcast
{
width: 200px;
}
The problem is: The php script echoes the data in a straight line causing it to the overflow from the div (broadcast).
word wrap: I hate IE, so no way i'm using that.
overflow: the properties do not provide what i want to achieve.
The question simply - I'm looking for a solution that'll solve this overflow problem once and for all. I'm looking for something general i can apply in any similar case.
My thoughts - Being a noob the only way i can think of is using javascript to insert a <br/> after every 200px of data? I know thats sad :P.
Thank You.
Did you try those CSS properties :
White-space
Word-wrap
Overflow: hidden
Related
I've been trying to apply a simple background image to a div. It seems like such a simple problem but after hours of searching through many threads on Stack and other sources, and trying many of the solutions, i'm still looking at an empty div.
I've verified that the asterisk.png file exists and renders when called by itself from an tag.
Here is the HTML
<div class="element"></div>
Here is the CSS
.element{
background-image: url('images/asterisk.png');
background-repeat: repeat-x;
width: 400px;
height: 50px;
}
Im hoping someone can point out the simple error I'm making here ... Thanks!
It should work, check in inspector if any other styles are not added to this element.
Something may make your element display: inline in this case, yes BG will be not visible, change it to display block or inline-block
Fixed it. I was incorrectly linking to the image file. 'images/asterisk.png' vs '../images/asterisk.png'.
My apologies ... I guess I had been staring at the screen for way too long and just needed to rest!
Thanks everyone.
I'm a complete CSS novice -- my background is back-end development. So please forgive the ignorance in advance.
I'm attempting to learn a bit more about the application (or.. practical use) of CSS.
Given the following CSS:
.input-size {
height: 25px;
width: 250px;
}
I'm trying to figure out why the following line of HTML in a WordPress page produces odd results:
<input type="text" placeholder="Search" class="input-size">
I believe the issue has to do with specificity, but I am unsure on how to give a heavier weight to the style above.
The following image is what I expect:
Notice the spacing between the bottom of the element and the canvas below.
However, when I apply the style to a textbox, I get the following:
There appears to be about a 25 pixel padding at the bottom, but that is not specified in the style posted above.
Any advice on moving forward would be appreciated. I'm, unfortunately, unsure of how to proceed with figuring out what could be causing the issue.
Thank you!
What you have is correct, however you do not have padding defined in your new class. What is most likely happening is that padding is defined for input and it just inheriting the properties from the default style. Since you have it inspected - trace the margin rule.
In the CSS, try specifying
padding : 0;
So it would be:
.input-size {
height: 25px;
width: 250px;
padding:0;
}
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
I am making a site that will give some code examples . So, I wish to show with proper indentation and also with different colors if possible.
Can anyone suggest me some way to do it ??
Thanks :)
You can use the SyntaxHighlighter script.
You can use it in this way directly.Also you can change it however you want
<div style="height: 200px; width: 300px; overflow: auto;"><pre>CODE
GOES HERE</pre></div>
I've seen a lot of discussion and debate on this with solutions from pure CSS to pure HTML. They can get pretty complicated, nesting divs within divs, using some pretty intense looking CSS. I figured I'd ask though, because I need a straightforward solution to this problem, and it needs to not rely on CSS tables (i.e. {display:table;} because I'm using that to show/hide the entire div and solutions using that never seem to work nicely with my other code. So how should I do this?
I came up with a solution. I'm not sure it's the best or most compatible, but here it is:
<style type="text/css">
table.center {
width: 100%;
height: 100%;
}
h1.center {
text-align: center;
}
</style>
<div id="hide-able">
<table class="center">
<tr><td><h1 class="center">I'm centered!</h1></td></tr>
</table>
</div>
If you have a better solution, please share!
you can have your outer div #wrapper{margin:0 auto;width:900px}
that gets it done nicely.
make sure to include doc-type for IE.