css - https://codepaste.net/3we9vf
im making a webpage from "scratch" but im having trouble with the these borders im trying to put. The bottom border of the navbar doesnt go all the 100%width and the aside right border doesnt go all the way up. Help ?enter image description here
Your issue was with padding in the .wrapper class CSS. Heres a working version: Working All I did was removed the 10px padding. If you want certain things padded it should be done on a more case by case basis.
.wrapper > * {
//no paddding
flex: 1 100%;
}
Related
I'm working on a Wordpress website and I use the custom CSS to change small things from the template. So I only know how to work with html and CSS.
But now I have a problem...
After uploading my logo, the header seems to stretch slightly out of proportion. There seems to be too much padding above the logo, more then below it, which makes it look uneven and the header just looks slightly too large on the whole. There is just too much white space in it… Whereas it was slimmer and a lot more streamline before uploading the logo.
The page I need help with: https://delizabeth.nl
Is there any way someone can help me fix this.
Your header has a max-height of 200px.
With the image added the way it is, the actual content exceeds that height and is cut off at the bottom.
The logo has padding around it and margin at the bottom. Since it only has margin at the bottom, the text doesn´t get verticaly centered to where the center of the image is but to the middle including the margin.
If you remove the padding and the margin around the logo, then the extra whitespace will disappear and only the padding from the header itself will remain.
It then all fits inside the max-height so nothing is cut off.
I don´t know how that theme works, but if it always has the same ID then the css would be:
#media_image-11 {
margin: 0;
padding: 0;
}
you need to set class[widget] (padding: initial;) and you can set image height and width.
I'm trying to customize the theme I'm using (biancaa) by changing the CSS of a child theme. I've been at it for a few hours (tinkering using inspect element) and have had no avail. Any advice would be greatly apprecciated.
I would like to completely remove the left and right padding so that the black line on the bottom of the menu extends to the edges of the screen, and the post fills up 95% the entire page width
I would like to get the menu to stick to the top when you scroll down
The site:
http://www.anniekip.com/
Screenshot:
try this
Open the following files
http://www.anniekip.com/wp-content/themes/biancaa/style.min.css
http://www.anniekip.com/wp-content/themes/biancaa/style.css
And look at the whole file with the following class
.site
Set the padding always well
padding: 0;
You won't be able to do this purely in the css. You will have to edit the html for each theme template to remove the nav out of the wrapping container, and then edit some of the css to display the nav correctly.
Add css on style.css file
.container {
max-width : 100% !important ;
}
.site {
max-width : 100% !important ;
padding :0 !important
}
I am using a wordpress theme and have changed my background image.
I now want to display an image on top of the white background (where the content is displayed).
I have done this by using the following code:
img style="position: absolute; top:244px; left: 220px;" src="http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png"
This looks exactly how I want it to, but it has a problem. The site has a drop down menu, when you scroll down the menu it will disappear when your mouse moves over the image which is displayed behind.
Can anyone help me to move the image back to overlay the background on every page?
I have tried using z-index without any success.
This is the site that I want to apply the image to: http://www.tgon.co.uk/
Here is an example of the problem I am having: http://www.tgon.co.uk/info/languages/french/
Any help you could give would be greatly appreciated.
Basically, what you need to do is to:
Remove the 'position:absolute' from the image. - this is what cause you the overlapping problem.
Add 'margin-top: -107px;' to the image. - this will push the image up to where you want it.
Anyhow, I didn't understand why didn't you use 'background' css property for this.
You could have just do this:
#primary {
background: #fff url('http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png') no-repeat;
}
You have to remove this image:
And add this css:
#content {
background-image:url("http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png");
background-repeat:no-repeat }
Here's the solution:
#branding { z-index: 1001;}
#inner-wrapper { z-index: 1000;}
Since the header is created before the #inner-wrapper div, you will need to apply a higher z-index to header compared to div#inner-wrapper`.
EDIT
Check the screenshot of the developer console view of your markup:
Just setting the z-index right for header & div#inner-wrapper did it for me.
Let's fix this then I'll be glad to help you set the image right.
I'm working on a site that has grid-16 to start with. I increased the grid size by a factor of 4/3, and have altered the markup. Adding float to either element does not appear to be doing anything.
The page is the homepage at http://ccachicago.pragmatometer.com/. I'm trying to get the main content area to display to the left of the sidebar, instead of having its top of the sidebar's bottom. I'm sorry not to provide singled-out HTML and CSS, but the page has a lot of inherited CSS, and I'm working on getting on top of it.
Get rid of the width: 1306px;
#main, #page-inner, #main-group {background-color: #fff; width: 1306px;}
#main, #page-inner, #main-group {background-color: #fff;}
I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page.
Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space.
Code can be seen here http://jsfiddle.net/FW98q/
MY gut feeling is the problem is at:
#Navigation_Container {
background: #3399cc;
height: 50px;
//width: 960px;
//margin: 0 auto;
}
Help is much appreciated.
Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)
I found the issue....Its in the class '.notice' that is in the footer...if you remove
position:absolute;
It works just fine. :) Check it out! Fiddle
I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.
Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this
position: absolute;
bottom: 0px;
left:0px;
Here is an example with the left:0px added
FIDDLE
#page_container, #Header {
width: 960px;
}
Made sure these two element are the same width as the others if you want them to be the same width.
// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.
Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.
add to your css
body{margin:0;}