I recently purchased the Margaret Studio theme from themecloset on Tumblr.
Once I added my own logo it cut off the first image on my blog with a white strip that must be the 'background' of my logo ( even though it's a transparent png). I would love to be able to fix this.
The main option I think would be to create a bigger space between my header and first post?
If you're wanting to create spacing between elements vertically, I'd add a margin-top:2%; to the lower of the elements.
If you're able to identify the <div> element which you'd like to move further down, you can add some inline styling to the div:
<div style="margin-top:2%;">
Or if you have access to the CSS, you could add an id to the div element and add the margin that way:
<div id="divIWantToMove">
and in the CSS sheet:
#divIWantToMove {
margin-top:2%;
}
You can play around with spacing using the W3 schools site :)
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_margin
(obviously the 2% I've referenced here can be swapped out for any number depending on how big of a margin you're looking to create)
Related
Actually I am creating a border around my website in TYPO3 (version 7.6.14). I am creating this whith three border pictures (one for top, one for bottom and one for the left and right side) and it still workes fine at "normal" pages.
Only the border for the left and right side is created by css and the two others in the template. The whole page is surroundet the div "website".
Now I added a "Grid Element" to the main page. This is also in the website div included. Only the border is not shown at the Grid Elements part and non of my tries workes.
My css code is the following one:
div#website {
width:1200px;
text-align:left;
position: relative;
background-image:url(images/border_lr.jpg);
background-repeat:repeat-y;
background-position:left;
}
I know that the pixel methode is not the best way, but it should not be the problem, I even changed this and tryed to resize the other content, but it did not helped. The border is not in the background, it is just not created at the Grid Elements part of the website.
Why not use the :before and :after pseudo-elements?
This website is built with a back-end web to print service called Zoo Printing. The client I work for does not like the original design so I've being hired to re-design it with the development team that handles the back-end. I replaced their old navigation menu with the current CSS mega navigation that's on the site. Their developers decided to keep their code on the website for back up just in case they need to roll-back to the old navigation. The issue is even though their code is commented out, it creates a huge white space between my CSS slideshow and footer. Their developers are blaming my code and will not tell me where the problem is coming from. Can one of you inspect my code and tell me what would be causing this? I've tried simply removing the white space with CSS by absolute positioning it off the page, but when i do this the footer changes on every page except the home and it also removes my CSS slide show. I can not figure out how to remove this white space without messing with my layout.
The website is Advanced Litho
body > div:nth-child(4)
This is the div that's creating the issues with the layout. So far I've tried to absolute position it off the page with no luck.
There is a div at the bottom that is making the space huge, it is right above the commented out content and right below the div with id=content. All of these boxes have a visibility of hidden which does not delete them from your page, it simply makes them invisible. All you need to do is find that div, and insert an inline style.
<div style="display: none;">(old nav)</div>
Essentially, they just hid what they were supposed to remove.
There are unordered lists inside <div class="nav_child"></div>
If you can remove them, it is best to do so, otherwise you can hide them with css and get rid of the white space:
.nav_child ul {
display: none;
}
I have a fixed top navigation bar 100px deep on web page and links on that bar go to id's down the page. The id's are associated with the h3 heading for each section. Unfortunately on clicking the link the page moves up and the first 100px is hidden behind the fixed top bar.
I could possibly embed the id's elsewhere in the page roughly 100px higher than the point I'm linking to (not that easy given the quite graphical design). I wonder if anyone knows any way to force those id's to stop 100px short of the top of the page?
Unfortunately I have to keep the development site behind a maintenance screen so I can't provide a URL. Thanks in anticipation (my first post to StackOverflow!)
Jeremy
One solution is to use the :target pseudo class to shift your headings about a bit. The trick is to increase their top padding by the height of your fixed element and then move them back up the page by subtracting the same amount from their top margin.
So, using your example of a 100 pixel high fixed element and assuming no existing padding or margin on your h3 elements, here's how the CSS would look:
h3:target{
margin:-100px 0 0;
padding:100px;
}
You may want to tweak those values, depending on your design, to add a bit of space between the fixed element and your headings.
I've found the answer
You can see it at work at
http://www.sanclerorganic.com/wordpress
The link code on the navigation bar is
Recipes
and the target down the page is
<div style="position:relative;">
<div id="recipeshomelink" style="position:absolute; top:-115px;"></div>
</div>
Obviously the -115px is adjusted to suite the top bar depth.
I hope this helps others.
Jeremy
There are several similar questions posted, but none that I found addresses my situation.
I would like to list items for sale, each in their own div. When an item sells, I'd like to place a transparent "sold" banner over any such item without fully obscuring the image. I will need to delegate someone else to add the "sold" banner in the code without the need for me to do this. So the simpler the method, the better.
Most, if not all, solutions on this site recommend creating the overlapping banner image in an absolutely positioned div. That secondary div contains an img src. This is looking like a lot more code to confuse the helper.
I gather it would be semantic and a lot easier if the transparent SOLD banner were a background. If I'm not mistaken, then all that would be needed is a simple class to add to any existing div. For example:
<div><img src="folder/item3.png"></div>
... becomes
<div><img src="folder/item3.png" class="sold"></div>
... thus doing away with a second div to contain the SOLD graphic. I tried this, and it appeared to work, but the banner remained stubbornly behind the item and no amount of Z-indexing and absolute positioning would get it out front where it belongs. (Actually I can't absolutely position this anyway since it interferes with the overall layout.)
I hope that someone can suggest a way to do this that solves the problem.
You cant use a background of the div containing the image because the background would always be under it. Unless you want to set the product image itself to a background and then just put the sold graphic into it as an image.
What I would do is, firstly you need your div containing your image to be position:relative. Then put another div inside it for the sold icon which is positioned absolute. z-index the sold icon above it.
e.g: http://jsfiddle.net/z2V2B/1/
html
<div class="imgholder"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div>
<div class="imgholder sold"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div>
css
.imgholder {position:relative; z-index:1;}
.soldicon {position:absolute;
z-index:2;
top:0;
left:0;
width:177px;
height:138px;
background:url(http://www.flq.co.nz/images/icon-sold.gif) no-repeat top left;
}
.sold .soldicon {display:block!important;}
.soldicon {display:none;}
-- ADDITIONAL 30/05/14--
If the SOLD label is overlapping the image -- which was originally linked to another page
...dit the code so that the sold div also has a link inside it to the same place as the image. Then add the following css:
.soldicon a {text-indent:-9000px; display:block; width:100%; height:100%;}
what this will do is create an invisible link (because the text will be indented off the page that is the full width and height of the sold icon div - it will seemlessly be as if the whole image is clickable again and not obscured by the sold icon
I'm trying to understand this webpage:
http://www.canadianliving.com/food/slow_cooker_beef_stew.php
It is divided into several sections where each section has a border around it. For example, to the right of the title "Slow-Cooker Beef Stew" is an image "tested till perfect". Immediately to the right of this is a border, which separates it from an advertisement. This border extends down and separates the section from the "Related Content" section below.
But what is making the border? I am using Chrome's Inspect Element, Computed Style, but none of the tags seem to have a border-style. What else can create a border?
(I'm not looking for the best way to make a border; I need to understand how other pages do it.)
EDIT:
Based on people's answers, I tried the html below, which is not working. I don't get how an image in a parent div is repeated in each child div in such a way that it fits exactly along the border.
<div style = "float:left;background-image:url('http://www.canadianliving.com/media/images/background_02.png?201206051535');background-clip:border-box;background-origin:padding-box;background-repeat:repeat-y;" >
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">hello</div>
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">there</div>
</div>
http://www.canadianliving.com/media/images/background_02.png?201206051535
Its an image, not a border, remove the image to get rid of the 'border'.
I deduced this by selecting the container element and reviewing the css background property,
for future reference.
Here an example:
<style>
div#test {
height:800px;
width:800px;
background:url(http://www.canadianliving.com/media/images/background_02.png?201206051535) top right repeat-y #676767;
}
</style>
<div id="test">TestDiv<div>
Keep in mind, this is a rough sketch of what it should look like. I'm not planning on learning you this without some effort. Try w3schools for an html / css tutorial.
I'm betting we all did this kind of research and a lot of trying before trying to submit to these kind of forums.
Happy coding, good luck!
D.
The background is set on the div#right_col where the ads are. They have a padding-left of 8px (width of the shadow background image) and a background set on content-container with url('/media/images/background_02.png') 0 630px repeat-y.
basically, it is a background url that is used as a shadow border. Please look at the CSS of #content_container in firebug/chrome inspect element.
It is not a border but used as a seperator.