There is a lot of bottom padding on my blockquotes. I can't get rid of it. See this image: http://imgur.com/PGCeY
My CSS settings are:
* {
padding:0;
margin:0;
}
blockquote {
width: 640px;
margin-bottom: 1em;
padding: 0px 0px 0px 0px;
}
I outlined what I am trying to get rid of with a red rectangle. In this image: http://imgur.com/PGCeY
Also I am using the pagelines wordpress theme.
Try adding this to the end of your CSS:
blockquote p {
padding:0;
margin:0;
}
If that doesn't work, right-click and view the source of your page to see the raw HTML. Then you'll know what elements are added to the blockquote.
You have a paragraph(as should be) in your blockquote? It's probably a margin from an inner element.
And it would be nice to see an actual example of the code. The code you show us here is not part of the problem from what I can tell.
Related
I'm a bit of a newbie to programming so posting on here to find some help.
Had a quick question which I'm assuming is easily resolved through custom CSS.
If you check out this post on my WP site you will see the content disappearing through the header.
Can someone please advise what piece of CSS has made this happen and what element I need to alter to set a regular margin?
Thank you,
The line that is causing you trouble is this one:
h1.entry-title { /*spacing to position entry title dimensions & font styles*/
margin:-2em 0em 0.5em 1.5em;
text-decoration: none;
font-size:2.8em;
display:block;
position:relative;
color:#474747;
}
It comes from a blog css file as "http://www.beendorsed.com.au/blog?sccss=1&ver=4.3.1".
In that line, when you comment out the line "margin:-2em 0em 0.5em 1.5em;" (like this: "/* margin:-2em 0em 0.5em 1.5em; */"), all will go back to normal.
To add that style to one set of pages only ("blog posts", for instance):
If you need that margin on one page, or one set of pages (like blog posts), add a class to it, like .post, and in the css file add it too, like this:
.post h1.entry-title { /*spacing to position entry title dimensions & font styles*/
margin:-2em 0em 0.5em 1.5em;
text-decoration: none;
font-size:2.8em;
display:block;
position:relative;
color:#474747;
}
When you add posts (instead of pages), you'll see that the articles are classed as ".post" (probably), just like the ones you are currently seeing are ".page". (I'm guessing the class name. Test it, see what the actual class name is, and use that). Here you have the line that states that class:
<article id="post-21" class="post-21 **page** type-page status-publish hentry">
Try to modify margin value in you .post declaration.
.post {
max-width: 640px;
margin: 130px auto 0px auto;
font-size: 16px;
}
Line 1804 in your style.css file
If you want to apply this just to on, specific page then do:
#post-104 .post {
margin-top: 130px;
}
You could change the #primary definition to be
#primary {
float: right;
width: 66.6666%;
margin-top: 100px
}
adding the margin-top there. You should get used to identifying the elements in a debug session in the browser to help you understand which element you are targeting.
Note that as I went through your CSS, I saw that you have some merge artifacts in the CSS, things like
>>>>>>> Another_Merge_test
which are not helping things for you.
I need to set a 4px space between all html internal components (in any direction top bottom left right). I am using an external css file for this. I tried this:
body {
padding: 2px;
border: 0px;
margin: 0px;
}
But this sets a space of 4px for all body not between it's components.
Also,
{
display: inline-block;
padding: 4px;
}
is not working either.
Can you please help. I am not allowed to change the html page.
You can use
body * {
margin: 2px;
}
Which will set that margin to every element inside of the body tag.
Looks like you need to set for the elements used on HTML , if you are
using Css preprocessor , then you can declare the values at the top
and later it will be used by all the elements like shown below :-
$standard-padding :2px;
$standard-border:0px;
$standard-margin:0px;
body,p,h1,h2,div,span{
padding: $standard-padding;
border: $standard-border;
margin: $standard-margin;
}
Maybe you can try padding like this:
body *{
padding:4px;
}
body {
background-color: white;
color: #000000;
font-family:"arial",arial;
margin:auto;
}
(header logo EWITA) #header {
position:relative;
left:-150px;
background-color:transparent;
text-align:center;
margin-top:50px;
padding:0;}
(HR LINE) hr.main {
position:relative;
top:-5px;
background-color:#353535;
height:10px;
width:100%;
margin:0;
padding:0;
z-index: -1;
}
#menubar {
position:relative;
background-image: URL('./pictures/menu.png');
background-repeat:no-repeat;
left:730px;
top:-40px;
height:25px;
width:300px;
background-color:transparent;
color:#ffffff;
padding:5 0 0 20;
}
(menu bar) table,tr,td {
border-spacing:0;
border-collapse:collapse;
padding:0 10 0 10;
}
(page after head) #wrapper {
margin:auto;
min-height:500px;
background-image: URL('./pictures/background.png');
background-repeat: repeat-xy;
z-index:-2;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 40px;
border:1px solid;
padding: 50 30 50 30;
this is my css i am writing a page for a client and due to some relative positioning it makes me a problem with a background as u see here the white line after the HR line.
Thanks everyone who responds.
Edit:
Wondered how to update this answer, as there is a lot to talk about found it best to take it from bottom up. This will bring you to a layout like this:
Stage one demo.
The menu and logo should stay in place when you re-size the window etc.
Had a look at your code now. It is better, but you still have some trouble:
border is still set on image. Invalid markup.
repeat-xy is still used on background. Invalid property value.
#content still has padding without units. Invalid property value.
<br> tags are still used to make paragraphs in text.
There is an extra } after #content. Invalidates CSS file.
Number 4. should be fixed, but not that important right now.
As we already have discussed 1-3 it is hard to understand why you keep them. Invalid markup and styling makes for unreliable result.
It can look OK in one browser, in one version of one browser, look whack in another, and totally break in a third. You get misinformation between code and result. When or if you fix it to be valid other unexpected things may change and you have to do a lot more work to clean it up. As a whole and rule number one. No matter how wrong markup and styling might be seen from a how to do it perspective one have to keep invalid markup and style out of it.
To validate your work, and as you are where you are in regards to experience, do it all the time. Do small changes: validate. Do small changes: validate. And so on. Use:
For HTML
For CSS
Markup
The markup as it is now is not the easiest to style or get to behave good in a dynamic way. hr's is not the easiest to work with and vary between browsers. Do not use tables for menu's or styling. They are best left for what they are intended to: show tabular data. For your menu you can ask yourself: what is the menu; well, it is a list. A list of options for end-user to navigate trough the site. There is a lot of examples on the web using lists as menus. Search the web for CSS list menu etc. You can create nice looking, cross-browser reliable CSS only, (no JavaScript dependency), menus.
But let us start with the basic markup: You will usually find it good to wrap the whole page inside a wrapper. Then add sub-items into that. To position elements like your main menu, logo etc. it could be good to use a wrapper for each and position them by float, margins etc.
In general use margins and padding.
Page layout
Head Div
Divider Div
Content Div
Footer Div
Head
Div float left Div float left
LOGOmenu
Styling + markup
To make it easy for yourself use temporary borders and background colors to view how the various elements float around. Also use the browsers built-in tools to show various things like margins etc. This is invaluable.
Only remember that if you use borders, and you intend to remove them on finished product, they can take up space.
As an example you could have something like this:
Strong colored first attempt.
HTML:
<div id="wrap">
<div id="head">
<div id="logo">
<a href="index.php">
<img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
</a>
</div>
<div id="menubar">MENU</div>
</div>
</div>
CSS:
* {
margin : 0;
padding : 0;
}
body {
font-family: Arial;
height : 100%;
background : orange;
}
#wrap {
position : relative;
background : pink;
width : 100%;
height : 100%;
}
#head {
position : relative;
width : 800px;
height : 131px;
margin : 100px auto 0 auto;
background : blue;
}
#logo {
position : relative;
width : 431px;
float : left;
background : red ;
}
#logo_img {
width : 439px;
height : 131px;
float : left;
}
#menubar {
position : relative;
background : #fff;
width : 300px;
float : left;
margin-top : 107px;
padding : 3px 0 3px 10px;
}
Note: I use a hard reset of margin and padding on all elements by:
* {
margin : 0;
padding; 0;
}
And then set margins and padding on tags and elements as I use them. Often find this to be a much easier way then the other way around. Remember that things like body also has padding etc. and often can result in undesired spacing.
This way you also get rid of the horizontal scroll-bar at bottom.
By using float on thing like logo and menubar the elements align nicely.
Next we can add the divider. Here we could use a div and set border for top and bottom. On content we use padding to make space between header, text and footer. We also add white border to top of content that aligns nicely with the divider.
Added divider, content and footer.
HTML:
<div id="divider"></div>
<div id="main_content">
MAIN CONTENT
</div>
<div id="footer">
FOOTER
</div>
CSS:
#divider {
border-top : 5px solid #353535;
border-bottom: 3px solid #888;
}
#main_content {
position : relative;
background : url('http://cupido.g6.cz/pictures/background.png');
border-top : 2px solid #fff;
padding : 120px 0 130px 0;
}
Next we can add the content text and style it. Also added style to footer.
With content and styled footer.
HTML
<div class="content_text">
<p>
text text text ...
</p>
</div>
CSS:
.content_text {
margin : 0 auto;
width : 700px;
background : #fff;
border : 1px solid;
padding : 50px 30px;
}
.content_text p {
font-size : 16px;
}
Resize window etc. and see it floats nicely around.
Now it is time to add the menu. As mentioned earlier we can use list for the menu. It is much more suited for the task then a table. In that regard also note that a menu might have sub items, as such a list becomes the only sane option.
Also note on the menu: You likely do not want to style visited links with other color. But that is up to you of course.
With added menu and some re-styling on background colors etc.
HTML:
<ul>
<li><a class="menu" href="smaler.php">úvodní stránka</a></li>
<li><a class="menu" href="sluzby.php">služby</a></li>
<li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>
CSS:
As we already have set margins and padding to 0 on all elements this is trivial:
#menubar ul {
list-style : none;
}
#menubar li {
padding : 0 10px;
float : left;
}
a.menu {
text-decoration : none;
color : #fff;
}
a.menu:hover,
a.menu:active {
color : #3cc8a8;
}
Remove helping colors etc. and we have a version 0.1 ready for further testing and expansion.
Result.
Result as one page.
Validated markup on result at W3C
Validated CSS on result at W3C
Original answer:
There is more then one problem. Firstly the markup:
XHTML
<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />
<img src="./pictures/header.png" width="439" height="131" border="0" alt="">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="" />
<hr class="main" /></hr>
Should be:
<hr class="main" />
Use paragraphs to group text, not:
Text<br/><br/>Text<br/><br/>Text ...
but:
<p>Text</p><p>Text</p><p>Text... </p>
CSS
Inline comments are not valid, use:
/* some comment */
Not:
// some comment
You are missing unit on most of your padding values. If a value is non-zero it needs a unit such as pt, px etc. Use:
padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;
If you do not, it has no/(should not have any) effect.
background-repeat does not have repeat-xy. Use:
background-repeat: repeat;
/* not */
background-repeat: repeat-xy;
or nothing at all, as that is the default.
Fix those first. Then set some color to your things so that it is easier to understand what you want. You can change them back later. Use red, blue etc.
Example.
Regarding zero width no break space bug, as displayed in Vim:
Try adding this CSS:
CSS:
#wrapper {
margin: auto;
min-height: 500px;
background-image: URL('../images/squared_metal.png');
background-repeat: repeat-xy;
z-index: 10;
padding-top:10px;
margin-top:-30px;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 10px;
border:1px solid;
padding: 50 30 50 30;
}
I totally overlooked the 'padding-top' css property originally. Thank you all for providing that information!
Please update your site with this CSS and let me know if it works! Since I tested this on my own machine, you should change back the background-url to your custom .png file.
I am working on making a navigation bar, and I am running into a problem. This is what my navigation bar looks like:
It has like a 8px white border around it, and this is what I want it to look like:
Without the 8px white border around it.
I am using this code for it:
.header
{
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position: relative;
margin-bottom: 30px;
}
I can using this:
margin-left:-8px;
margin-right:-8px;
margin-top:-8px;
And put width to 102%, but then it gives me scrollbars on the bottom.
This may be confusing, but I am a beginner, and I need help.
If you can help me, I will appreciate it a lot!
Thanks.
You have to set the margin on your body to 0 like this:
body
{
margin:0;
}
Your body tag comes with margins. That is your problem.
Do:
body { margin: 0px; }
I believe it's because the browser has some default styling, one of which is a margin of 8px surrounding the content, look into "css reset" or if you just want to remove that one thing try
body
{
margin: 0px;
}
Hope that helps
set your html and body to:
body, html {padding: 0; margin: 0;}
This will reset all browsers and remove the border.
This will declare on the entire page not just to the Body.
* {
padding: 0;
margin: 0;
}
http://jsfiddle.net/cornelas/gwM4X/2/
User Agents apply default styles to your web page, which you need to override, in this case it's margin so either you can reset the margin like
body {
margin: 0;
}
Else you can also use a * universal selector like
* {
margin: 0;
padding: 0;
}
DEMO HERE
For a proper stylesheet reset, use CSS RESET STYLESHEET
For example here http://jsfiddle.net/jitendravyas/5Wqn4/1/
I want to take <h1> over red area. How to make is possible without using image and another added more element.
using border is not necessary I just want background like this.
Without using any extra markup, there's a couple of things you could do.
Apply a negative top margin on the h1:
h1{margin-top:-150px;}
http://jsfiddle.net/5Wqn4/2/
Position the h1 absolutely:
h1{
position:absolute;
top:50px;
left: 50px;
}
http://jsfiddle.net/5Wqn4/3/
Without your body border:
Without using the border you've added to the body you can simply style the h1 as you require:
body {background:yellow;margin:0;padding:0;}
h1{
background-color:red;
margin:0;
height:150px;
}
http://jsfiddle.net/5Wqn4/5/
UPDATE
Further to your comments below, here's a sample that probably matches more what you need:
http://jsfiddle.net/SbGDQ/
You can use this CSS rule:
h1 {
border-top: 20px solid red;
display: block;
}
body {background: yellow;padding: 0px; margin: 0px;}
h1{background: red;line-height: 10em;margin: 0px;}