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.
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.
Conditions
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the Desired Output as possible. Not just similar, but as close to identical as possible.
This needs to be done in a way that doesn't just superficially reflect the intended output, but is done in the "right" way. For example, I could very well just adjust padding and margin sizes until it looks the way it needs to be, but that wouldn't solve the overarching problem and makes for badly styled code.
This has to be predominantly done with CSS. Only organizational HTML tags can be used and no packages or code can be imported.
Problem:
Each review is supposed to be separated by 20pt of vertical distance. This isn't working out for whatever reason.
It might have something to do with the fact that I've got some of my reviews looking like this when I need them to look like this.
That might have to do with the fact that padding is applying only to the text when it needs to apply to the review as a whole.
You can see in the first image that the blue bar, which represents padding, is only under the text and not under the image and the text.
I'm wondering if this has something to do with img elements being inline elements and not block elements? Any advice you have on this would be greatly apprecaited.
Code:
CSS
HTML
The padding does not work with your images because you have
float: left
applied to them. If you take that property out, the padding will take the img into account.
On a side note: maybe you should reconsider your html structure. Logically the review text and the reviewer belong together, so they should be enclosed by some parent div element. Just look at the real rotten tomatoes website and how they structure their reviews and let that "inspire" you ;-)
But basically it should be something like this:
<div class="review">
<div class="review_quote"></div>
<div class="review_source"></div>
</div>
Well structured HTML really helps with styling. HTML and CSS go hand in hand, so if your HTML is messy your CSS will be messy and "hacky" too. So first make sure your HTML makes sense (grouping, nesting, etc.) first.
add this class in your css
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
Well.. your padding in css is refering only to class 'reviewer-info'. Elements with class 'reviewer-text' got their padding set to 8px;
If you want to have result for that block like on the picture apply bottom padding for 'reviewer-text'. Change:
.reviewer-text {
padding: 8px;
}
to:
.reviewer-text {
padding: 8px 8px 20px 8px;
}
See: https://fiddle.jshell.net/a9xxoz8L/1/
I would like to know all the different types of div classes. I have a small amount of understanding of divs.
Here's an example of how I would use a div and then customise the content in the div using CSS.
div .header {
font-family: "Bebas";
font-size: 25;
font-color: #00FF00;
float: right;
position: relative;
right: 120px;
bottom: 1095px;
}
So, if you're not following my question(s), what I want to know is;
A. Does that code look alright?
B. How many div classes are there, and what are they called?
and C. Could someone give me a brief explanation as to what they are and more specifically, how to use them.
I'm mostly self-taught, in case you wondered.
To answer your question you can have as many div as you want. and you assign class or id to identify each div. just be aware id are unique, you can not assign the same id to more than one elements.
and your css format is right, but I am not sure why you declare right/bottom those will only render when your position is absolute with out float.
I would suggest you go through some tutorial at http://www.codecademy.com. it's free. and don't required any sign up, unless you want to save your progress.
As previously said, you can set as many div classes as you'd like, they're not preset. I would also recommend doing the Codecademy tutorials.
Looking at your code, you're telling the div to float: right; - fine. Then you use position: relative; followed by right: and bottom: values. Either float or position, no need to do both.
The way you've written the rule is probably not how you mean it. It's currently looking for this -
<div>
<div class="header">
<p>Content</p>
</div>
</div>
An element with the class header that's inside a div.
You should remove the space so your rule becomes -
div.header {
enter code here
}
Yes, the code you wrote looks fine. I don't know what you intended to do with this code, so going by just the syntax it looks fine.
Coming to your sub-question B and C,
div is block level element with almost no specific task or objective. They are general purpose elements used for most tasks. Block level elements act as containers and div is the most basic type of container we get.
We can use div to store other elements, design web document and proper indention of text and images and what not.
Let's answer your questions one by one:
A - Your code looks fine ( depending on your needs ).
B - You can use as many div classes as you like.
C - Simply you can use div classes to describe it's content like: div.header , div.body , div.footer and so on.
But i recommend to use the new HTML5 semantic tags instead, it is easy, clear and more powerful with search engine optimization.
For more clarification, kindly check the following link www.itibooks.com/html/html5-semantics .
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I'm having trouble setting the width of the in this Coda-Slider tab set up. I'd like all the tabs to display in one line rather that wrap to two.
http://www.cidigitalmedia.com/coda-slider-2.0/index.html
You'll see the last tab wraps below.
Looked over the CSS and .js and could not find anything setting the to 552...
But IE Developer Tools toolbar and Firebug show an inline style of 552px...
I just can't find where that is.
Style sheet:
http://www.cidigitalmedia.com/coda-slider-2.0/stylesheets/coda-slider-2.0.css
Would greatly appreciate some help.
Best wishes,
Adninjastrator
You're right. Some of the styles in the slider aren't in the CSS, but are instead in the HTML using style attributes. You'll need to open the index.html page, find the ul, and replace the style="width:572px attribute to style="margin-left: 0px; width: auto;" or something that suits your needs.
For a cleaner perspective, you could create your own CSS class or id.
ul#tabs {
margin-left: 0px;
width: auto;
}
And give ul an id id="tabs"