I am trying to create a div on my site that is supposed to work like the descriptions on Ebay where all the css styles of the main site are stripped off and then whatever styles are in the div are what style the div (if you can understand what I mean). I've been trying to use a reset stylesheet, but my problem is that the reset is also resetting anything I put into the div. For example the following:
<div class="reset_this_div">
<font color="red">This is reformatted</font>
</div>
should reset the css in the div, then make the text "This is reformatted" red with the font tag. However, the reset seems to be overriding the font tag and the text just stays black. Does anyone know how I can fix this?
Thanks!
Have you considered using one div inside another instead of using the tag?. Something like this:
<div class="reset_this_div">
<div style="color: red !important;">This is reformatted</div>
</div>
Regards
Related
I'm working on a mockup but keep running into issues with the navbar and main content layout. The page needs to look like the mockup image below on desktop.
I've tried everything I can think of and read up on the bootstrap site but continue running into problems.
First the navbar should be fixed so it scrolls with you. I've copied from one of their templates but it doesn't scroll like the demo unless I change it to pull-right. But if I use pull-right it removes the top spacing and first container spacing needed. I've tried the body tag padding-top but all it does is create more space between the nav and main container not above the nav.
The other issue is the row and column layout in desktop. The col-md-8 doesn't line up with the other col-md-4. It looks ok in mobile with 320 wide.
I'm pulling my hair and not sure what needs to fixed. If anyone can spare some time and have a look I'd really appreciate it.
Live links to the files are below.
link to image mockup
link to live webpage mockup
link to css override
On your CSS override you have the attribute .navbar (position:relative;) This overrides your navbar fixed top property.
As far as your col-md-4 goes..you have it wrapped in an html descriptor..which is this: <!-- -->. This just gives descriptions of what html attribute is listed. These descriptors are on a lot of your actual html and need to be removed in order for the code to work properly. Remember though some of them are actually descriptors...like <!--fixed navbar-->
hii just checked your live website all problems is the way you are using div tags .. so for first section of image and nav bar it should be in one div tag
<div class="col-md-12">
<div class="col-md-12">
<div class="col-md-4">IMAGE</div>
<div class="col-md-8">your nav bar </div>
</div>
<div class="col-md-12">
Banner
</div>
<div class="col-md-12">
<div class="col-md-4">
HR MARUTIS STUFF
</DIV>
<div class="col-md-8">
HI LOUREM THINGY
</div>
</div>
and soo on
HOPE THIS HELP IN YOUR FORMATTING OF PAGE
Everything seems to be fixed now. Perhaps the biggest issue I was having was getting the navbar in proper locations both desktop & mobile. Originally I was using an override for .nav to modify the margin in order to get the placement right in desktop, but in mobile view it would be in a different position, not to mention it kept sharing the margin ratios of 80px top and 120px right. This would force the toggled menu to be 80px further down rather default 0px. I couldn't figure a way around this so I figured why not try adding a div tag just for the margin spacing. Apparently this seemed to work after adding new info into the media queries. Also fixed a spacing issue when in tablet widths with nav and hero image.
As for the rest of the layout, I used col-md-3 and col-md-7 which pretty much lined everything up right away except for some padding needed. Everything else like h1 and h3 I used a simple class for mobile to adjust the margins again.
If there's an easier way or more efficient way of coding this I'm open to suggestions if anyone has some. Updated Live Link
I just installed Foobar on my blog but the customer support hasn't responded yet after a few weeks to my query.
I'm basically applying this custom modification offered by them (http://codecanyon.net/item/foobar-wordpress-notification-bars/full_screen_preview/411466) to add a Like button to the toolbar at the top.
What I'm struggling with is to align some Text before the <div id="social_target"></div>, so that the text and the Likebutton will be aligned to look like "Like Us On Facebook! LIKEBUTTON".
Right now when I add text before the <div id="social_target"></div>, the text appears but the Likebutton appears underneath the text so it isn't visible at all.
How would I do this?
I don't know exactly how wordpress works and if you have access to the html code, but if yes, try putting the text inside a div and applying some css to it, something like this should work:
<div style="width: 400px;">
<div style="float:left;">Like us on Facebook!</div>
<div id="social_target"></div>
</div>
The value of the width is just a guess, you can adjust it.
A few things to check:
Is the Div that your entire code (the text and the social_target div) being put into too small? If so, it'll push the Div onto the next line. You'll need to edit the size of the Div you're putting this stuff into.
Make sure you apply CSS to the Div so that it stays on the same line. Alternatively, you could use a span:
<span id="social_target"></span>
Otherwise, Divs will get pushed to a new line unless you specify something like:
#social_target { display:inline-block; }
or
#social_target { float:right (or left); }
Like Lucas has in his code above.
I'm sure this is some stupid CSS mistake, but in this template website I'm making, whenever I put more than one line of text in the content div, it misplaces the two background divs on either side of it. Here is the HTML and CSS:
http://pastebin.com/txmQzbx3
I have tried everything I can think of, but I don't know what could be wrong with it.
First, there's no such thing as float:center. If you remove that and change the position value for your content div from relative to absolute, then it works.
http://pastebin.com/B9tXgXYj
If you want to keep it fixed width then just add float: left to the content css
If you want to have it fluid then you'll want to take a look at using the display: table|table-row|table-cell css properties to do it
Try placing your backgroundright div above content div,
<div id="backgroundright">
</div>
<div id="content">
<p></p>
</div>
Hope this helps
Is there any way to have a custom-shape image container? To use something instead of <div />?
The problem appears when I need to add corners on top of the #content-box ( http://img855.imageshack.us/img855/8343/screenshot20111027at163.png ). The corner-images are using only half of the block element, the rest (the pink alpha-background) are blocking the active-elements underneath it.
Is there any workaround for this?
To answer my own questions:
It is not possible to have a custom shape HTML element without parent block element holding it anyway, e.g. in case of SVG.
However, the one workaround that I've managed to come across is magic CSS pointer-events rule, which, as you might have guessed already, helps to click through the element.
pointer-events: none;
That did solve my issue.
It's not possible to have custom shaped containers. You could do this though using <div> wrappers, each containing a different background image. For example:
html
<div id="content-wrapper">
<div id="content-box">
<!-- Upload photo content box --->
</div>
</div>
css
#content-wrapper,
#content-box{
width:500px;
height:500px;
}
#content-wrapper{background:url('images/four-corners.png') no-repeat}
#content-box{background:url('images/octagon.png') no-repeat}
This way the images won't block any active elements on the page.
I listed categories in my website on my home page. I want the image to change to the blue version of it onhover position. I also want that picture to change to the blue version when Computer Services heading is onhover in onhover position. I coded one way but it looks like is not working properly because I went inside of the image it changed then it went back several times. Is there anybody can help me with this ?
Here is the coding I made for this;
http://jsfiddle.net/4M2sr/
Note: I don`t want that black text to change the color of heading or picture.
What's happening is that your <p> tag is sitting on top of the other elements, blocking the on-hover effect when you mouse over the middle of the image. There are a couple of ways you can fix this:
Use z-index to fix this problem by forcing the <p> tag behind the other elements.
Change the <p> tag to an inline tag, like <span>.
Apply display: inline to the <p> tag's style.
Note: if you use the second or third, you may need to adjust the positioning styles of the <p> tag.