ISSUE
| <---- HEADER ----|............|
| <--------- Post content --------> |
| <---- FOOTER ----|............|
Here is the live example:
Version 1: http://myreadingmanga.info/wordpress/?p=1588 [Image is bigger than the window size]
Version 2: http://myreadingmanga.info/wordpress/?p=1603 [Image fits the window]
In version 1, the Header and footer leave out the space and do not cover the whole window.
I need it to be dynamic so that it expands according to the image size. I couldn't get much help in other topics. So if you can help, it would be good.
Yes,I have inspect the whole css rules .Please remove the width:auto from the rule
body.single .content {
padding: 0 20px;
/*width: auto;*/
}
It works perfectly on my system
Use a wrapper-DIV:
<div id="holder">
<div id="header" style="width:100%"></div>
<div id="content">
<img src="...">
</div>
<div id="footer" style="width:100%"></div>
</div>`
Check it it works fine as your requirement!
Just add one extra property in the css entry rule
.entry {
background: none repeat scroll 0 0 #373737;
border-top: 5px solid #F15123;
box-shadow: 0 1px 3px 0 #141414;
width: 1500px;/* add this property*/
}
Follow the step by step shown in the images
Finally, I found out a solution. Just needed to add
body
{
position: absolute;
width: auto;
}
.site-inner, .wrap
{
max-width: none;
}
Related
I upgraded to the most recent version of Firefox, but this is still happening. It works fine in Chrome. Instead of my horizontal rule appearing near the bottom of the page where it belongs, I have a 1024 pixel line appearing to the right of my web page in firefox.
HTML5:
hr {
height: 2px;
width: 1000px;
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 1024px;
}
<footer>
<p/>
<hr/>
<p style="text-align:center;">Home | E-Mail Form | Calendar |</p>
<br/>
</footer>
I have no clue what's causing this. Thank you
You need to be clearer with what you're trying to achieve, also please post jsfiddles so we have something to work from or indent your code.
hr {
height: 2px;
width: 1000px;
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 1024px;
}
<footer>
<p/><!--(Not valid)-->
<hr/>
<p style="text-align:center;">
Home | E-Mail Form | Calendar |
</p>
<br/>
</footer>
http://jsfiddle.net/25zcvws2/
Rather than setting exact px measurements, I think you'd be better either using percentage units, or additionally using calc, both of which are shown below. This way, you'll make your code responsive as well as more efficient by making the following alterations.
Removed redundant closing p tag
altered width of both footer and hr element (as described above)
added a color to footer to allow text elements to appear
placed text-align property in css
Added a font coloring to display the other text for demo only (i'm presume this has been left out for demo purposes by OP, i've just added one in)
This can be seen below:
hr {
height: 2px;
width: calc(100%-24px);
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 100%;
color:red;
}
footer p{
text-align:center;
}
<footer>
<hr/>
<p>Home | E-Mail Form | Calendar |
</p>
<br/>
</footer>
I am building a site using foundation 3 and the native orbit slider.
so far so good... but the slider info does not appear in the correct place in chrome.
ok, easy fix i hear you say...apply chrome specific styles. Good, I like the idea except that messes with safiri, which renders the page fine.
The html:
<div id="featured">
<div>
<img src="images/slider/ironman-txt.jpg" alt="">
<div class="featuredInfo">
<h3>IRON MAN</h3>
<hr />
<p>When Tony Stark’s world is torn apart by a formidable terrorist called the Mandarin, Stark starts an odyssey of rebuilding and retribution.</p>
<ul class="featuredActions">
<li>Watch Trailer</li>
<li>-15 PG Rating</li>
<li>Book Seats</li>
</ul>
</div>
</div>
</div>
The css (scss):
#featured {
background-color: $white;
max-height: 400px;
.featuredInfo {
float: right;
padding: 0 1em;
max-width: 25.5em;
height: 100%;
z-index: 10;
h3 {
padding: 0.5em 0 0.1em 0;
margin: 0;
text-transform: uppercase;
}
hr {
margin: 7px 0;
border-color: $txtColor;
height: 2px;
border-width: 1px;
}
}
a live link:
http://madmantis.co.uk/sites/schwack/
I know that if I add position: relative; and top: -400px; the featured info div will move to the correct position in chrome but obviously knock out the other browsers.
I am a little troubled as using foundation, I can not see what's wrong...
Found a neat little solution...
to differentiate chrome from safari (and other android browsers) the webkit css selector cannot be used.
this tiny script sorted it out:
http://rafael.adm.br/css_browser_selector/
I'm currently building a theme / style for a piece of software.
Currently, the code looks like such:
http://jsfiddle.net/afseW/1/
The relevant code is:
body div[type*=privmsg] .sender {
font-weight: 700;
width:134px;
text-shadow: #fff 0px 1px;
background-color: #eee;
min-height:22px;
border-right: 1px solid #dcdcdc;
padding-right:5px;
text-align:right;
display:inline-block;
overflow: auto;
}
Note that in fiddle, for some reason, the text is collapsing onto the second line, whereas in the client, the image looks like this:
Granted, a span is not meant to be a block, hence I've given it the property of: display: inline-block;
But how do I get the height to inherit the parent p block?
I changed DOM structure. See the inline style. In the first div (.message) I prefer a better solution adding a .clearfix class, see this.
<div class="message" type="privmsg" style="overflow: auto;">
<div class="sender-cont" style="width: 30%; float: left;">
<span class="sender" ondblclick="Textual.nicknameDoubleClicked()" oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
</div>
<div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
</div>
</div>
Hope this helps!
Since the spans are a set width, probably the easiest thing to do here is just make the span have a absolute position.
body div[type*=privmsg] .sender,
body div[type*=action] .sender {
position: absolute;
top: 0;
bottom: 0;
left: 0;
...
}
Then add padding to the parent element:
body span.message {
position: relative;
padding-left: 140px;
...
}
http://jsfiddle.net/afseW/3/
PS: please provide a trimmed down version in jsfiddle next time, the html and css here is pretty epic.
Hey guys so I have the follow:
http://jsfiddle.net/z3Hr2/
This is my nav that I use to access in JQuery, tables...here is a photo:
Now when I click one of the links a table pops up, like this:
The problem is that in IE there is a huge gap in between the top to the bottom, even though they are display:none ( the tables that are opened when clicking a nav link).
Here is what I mean in IE:
Here is the table containers layout:
<div class="csvemployeestools">
<div class="MemberopenstatusViewer">
<div class="OpenstatusViewertable">
table that is opened depending on which link clicked in nav....
</div>
<div>
.....
</div> <!-- after all tables are defined, this closes it out.
CSS:
.csvemployeestools{
margin-top: 2%;
overflow: hidden;
}
.MemberopenstatusViewer{
display:block;
/*float:left;*/
margin: 0 auto;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .7em;
width:100%;
/*overflow-x: scroll;*/
}
.OpenstatusViewertable {
width:100%;
max-height: 300px;
overflow-y: scroll;
margin-bottom: 3%;
}
Hey guys I figured it out....I just removed the divs around the tables:
<div class="MemberopenstatusViewer">
<div class="OpenstatusViewertable">
</div>
<div>
Thanks though!
I don't know if this will help, but you should be using div IDs for layout not classes.
This is much better:
(class = . )(id = #)
But I'm not sure how this relates to this question.
Hi all !
I want to create a small round static percent indicator in CSS but I can't find the solution.
The squared indicator at left is ok, but so ugly, I want it round !
I have tried with rounded corner (cf indicators at the right of the screenshot), and I wonder if there is possibility to add a rounded mask to hide the corners (cf. css3 mask : http://webkit.org/blog/181/css-masks/), but it seems like it's only for img...
The solution can works only on webkit browsers, because it's for a mobile webapp.
Here is my code to create the (ugly) indicator in the image above :
<div class="meter-wrap">
<div class="meter-value" style="background-color: #489d41; width: 70%;">
<div class="meter-text"> 70 % </div>
</div>
</div>
And the css :
.meter-wrap{
position: relative;
}
.meter-value {
background-color: #489d41;
}
.meter-wrap, .meter-value, .meter-text {
width: 30px; height: 30px;
/* Attempt to round the corner : (indicators at the right of the screenshot)
-webkit-border-radius : 15px;*/
}
.meter-wrap, .meter-value {
background: #bdbdbd top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 2px;
color: #000;
text-align: center;
width: 100%;
font-size: 40%;
text-shadow: #fffeff 1px 1px 0;
}
Add a wrapper around your .meter-value class, set its overflow to hidden and then set the width of that layer to get the desired effect. The rounded corners on the .meter-value class should remain intact and give you a nice fluid progress indicator.
You will have to move the .meter-text div outside of the wrapper to ensure it's visible throughout the transition, so your html would like something like:
<div class="meter-wrap">
<div class="meter-text"> 70 % </div>
<div class="meter-value-wrapper" style="width:70%;">
<div class="meter-value" style="background-color: #489d41;">
</div>
</div>
And the class for .meter-value-wrapper might look like:
.meter-value-wrapper {
overflow: hidden;
width: 30px;
height: 30px;
}