I'm building a personal website and I would like a tab-like (as used word processors) effect for projects and their respective descriptions. Example display:
ReallyLong NameProject Project1 Description
FooBar Project Project2 Description
I've tried a table solution with cell spacing of 10px but I didn't want spacing on all sides, just to the right. I haven't seen any css examples where cell spacing was only applied to the right side. Is it possible?
I've also tried this in the css file(it had no effect):
table {
padding-right: 10px;
}
Thanks in advance for any insight.
Instead of styling the table with padding, which should do nothing, try applying it to the td elements in the table like this:
table td {
padding-right: 10px;
}
Try applying the padding to the td element, and not the whole table element.
Related
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 have two lines that have space between them. Like the one below....
<h2> Something Something <h2>
<h4> Something here too </h4>
I want it to look like this:
<h2> Something Something <h2>
<h4> Something here too </h4>
The space is shown in the browser. I used the tags just to make it clear.
How to reduce the space within the orange rectangle ?
First, ensure that padding and margin on your header elements is 0.
After that, you can adjust their line-height values to get the amount of space you like. Example: http://jsbin.com/afivoq/4/edit
Another option for you! You can apply a negative margin-top on header elements which follow other header elements, like so:
h2 + h4 { margin-top: -20px; }
See the jsbin for updated example.
I'd set all padding and margins to 0.
h4, h2 { padding:0; margin:0; }
This is an oversimplification of your code most likely but it'll get the job done.
Add it in your css:
h2{
margin-bottom: 10px; //something smaller
}
h4 {
margin-top: 10px; //Whatever you like
}
Your second <h2> isn't a close tag </h2> so your adding an extra H2 element. Also take a look at this example with Firebug installed. Firebug has a feature called Layout which will show you where the space is coming from:
Resetting your margin and padding for the header tags like everyone else is saying is a great start. The best advice I can give someone who is learning CSS is to get chrome.
Right-click the element you want to change and hit "Inspect element." On the right hand side, you can alter the CSS on the fly. Then you can copy and paste the results into your application. Chrome also has the ability to save your CSS code.
I have an HTML table with two rows and two cells in each row.
Cell 1 in each row has an image placeholder.
Cell 2 in each row has some text (different in every cell).
When I load it to the server it shows up like the image (cell 1) is aligned to the top and the text (cell2) is lower than the lower edge of an image.
I've tried v-align property for the table, vertical-align CSS property, cell padding, smaller font, smaller image etc.
Always get the same result.
vertical-align:middle; in CSS
You should make that thing into li's.
HTML:
<ul class="usps">
<li>Denver’s Only LOCAL Ad Posting Service.</li>
<li>Your first week of ad posting is FREE!!! We are that confident of our ability to post LIVE Ads for your firm!!!</li>
<li>etc</li>
</ul>
CSS:
ul.usps { list-style-image: url('checkbox.png'); }
For you question:
That's because you have set the vertical-align wrong (baseline). This alignes the stuff to the baseline of the parent element.
Are you sure you typed the properties in correctly? Using Chrome's Dev Tools and editing the CSS, this worked for me:
.content td { vertical-align: middle; }
#PeeHaa is right that you should not be using <table> for this since it's not tabular data. The most semantically correct choice here would be <ul> with:
ul li {
display: block;
list-style-type: none;
}
Remove the vertical-align:baseline from your tr definition. Then, to keep your spacing, add height: 65px;
You have:
vertical-align: baseline;
in your style.css, line 15. This is preventing it from looking how you want it to.
i'm new to html and i'm having problems moving the table down the page. http://tinypic.com/view.php?pic=eqdpjb&s=7 . I tried setting the 'margin-top: 400;' which works however the navigation bar at the top (i created in dreamweaver using the navigation 'wizard') moves as well to the bottom of the page!. How can i fix this? i want to move only the table without affecting the navigation bar been driving me nuts!
css
table{
background: whitesmoke;
border-collapse: collapse;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Your problem is that your navigation is positioned relatively to your table so when you add a margin also the navigation gets the margin.
The solution would be to add a minus margin to your navigation, as shown here:
#navigationId {
margin-top: -400px;
}
If you are adding margin-top: 400px; to table and it also moves the navigation, then that either means the navigation is also a table or the navigation is within the table.
If the navigation is also a table you will have to give the bottom table a unique id and then add the margin to that id only.
If the navigation is within the table, put it in its own div.
If it's none of the above you will have to post some HTML.
Try this:
table {
background: whitesmoke;
border-collapse: collapse;
margin-right: auto;
vertical-align: bottom;
margin-left: auto;
}
Hope it works for you! :)
Longer term, I advise you to learn to hand code using an ide such as netbeans or a simple editor such as notepad++. Using dreamweaver is all very well but unless you understand how the code works you will always encounter similar frustrations. A great resource to learn html and css is w3schools www.w3schools.com
A very good book on css is css the missing manual (o'reilly)
You may find all this slower in the beginning but you will end up writing cleaner and faster code as a result.
Make sure the table and the navigation bar are in two separate tags, which are both in a third div.
By using margin-top on the div with the table, you will force that entire div down from the top of that third container div.
Make sure to get rid of the margin-top stuff in the table css declaration.
Eg.
Navigation code here.
Table here
I have text within a paragraph tag that that fits snug on the bottom of a div, which you will see in this picture: http://i44.tinypic.com/e05s0z.png
I could put some padding at the bottom of the div to fix this, but there might be multiple divs, depending on how many items are on that page.
What I need to do, is put some spacing between the end of the very last div (class="article") and the text within the paragraph tag.
Here is the css for the article class
.article {
padding:10px;
overflow:auto;
}
Text w/i the paragraph tag
<p>Herkimer County Community College does not
discriminate on the basis of race, color, sex,
national origin, age, handicap, or marital status
in admission, employment, or in any aspect regarding
the conduct of College business.</p>
What should I do?
Give the final paragraph an id - #disclaimer, perhaps - then style that to have padding-top.
<p id="disclaimer">Herkimer County Community College does not
discriminate on the basis of race, color, sex,
national origin, age, handicap, or marital status
in admission, employment, or in any aspect regarding
the conduct of College business.</p>
and...
#disclaimer {
padding-top: 10px;
}
[EDIT]
An alternative to this, based on your comments, would be to surround the article(s) in a div, and give that div.class a bottom-margin/padding style.
If you have other paragraphs on your website and do not want to give it an id or class, then you can also use
.article + p {padding-top: 10px;}
Some old browsers will not be able to make out this selector, though
You could wrap your paragraph in a container that has padding at the top, so it doesn't matter what's above it.
For example, wrap it in a div with the following css
div.finaltext {
clear: both;
margin-top: 10px;
}
Here are your options as far as I see it:
Use the :last-child CSS3 pseudo
class to target the last div. This
isn't supported by IE at all, so
depends how important that browser
is to you whether this is an option,
but at least other browsers would
get the desired effect.
.article:last-child { padding-bottom: 20px; }
Add a class to the last div with the same style as above. This isn't ideal and may or may not be possible depending on how the divs are generated.
Add a class to the p tag with a padding-top value.
Use .article + p selector to target a p tag that is a direct sibling of .article. This is supported in IE7 (I think) but not IE6.
I would always give preference to #1 or #4 as it reduces clutter in the HTML, but as I mentioned IE could be a problem depending on your needs.
(thanks to Residuum for #4)
there is also the first-child and last-child css methods
note: check browser compatability for those you wish to support
It's the construction like this?:
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<p>kfdhsjkfdks</p>
You use padding: 10px so the div has 10px inside margin.
If it's a CMS, I'm sure that the text of the paragraph could be wrapped inside another tag (DIV) or maybe a class for the (P). If this isn't the case, may I ask if there's a surrounding wrapper around all of the article divs and the p tag?
If that's the case then you can get to the P tag using CSS, if not, there's no way you achieve this in every browser.
OR... I realized you could do a trick here. but you've got to be sure you have a selectable div on top of the article divs.
It should be something like this:
.article { margin-top: -5px; margin-bottom: 15px; }
so, every div.article will move 5px up, leaving 10px of real margin betwen article divs. but the last one won't have the -5px move up, so you'll end up with 15px bottom margin for the P tag.
You could play with the numbers to make it the most comfortable number. And in case you need more control, then use the padding values you set to 10px in every way and set them accordingly to compensate the margin offset.
Could you simply add a couple of <br/> tags after the last div?