My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/
Related
I have a layout as shown in this fiddle: https://jsfiddle.net/4dbgnqha/4/. For reasons that you can read about in this post, I don't want to change the way the page is laid out.
Now, it works fairly well, but the issue is that when I add a border to the bottom of the .item divs, I realize that they don't span the full width of the page. As you can see in the above fiddle, the second .item down doesn't have enough content to fill the width, so its border doesn't reach the full width.
I thought I could fix this by just adding .item { width: 100%; }, but when I do that, the image gets added enough additional width to center the p, which looks really weird. Demo of that: https://jsfiddle.net/4dbgnqha/7/
I know it will fix if I add a set width to the image, but as I mentioned in my original post, I want it to be really flexible, able to have many image widths. I also know that if I wrap the image in an element and set that element to a really small width, like 1px, it will work, but that seems like a hack, and the reason I'm doing this stupid table layout in the first place is that I'm trying to avoid any such hacks.
How can I fix this issue?
You can add this into the CSS, it's a hack, but works very well with table layout.
.item p {
width: 100%;
}
https://jsfiddle.net/4dbgnqha/8/
you need to add width 100% to the .item p element so it gets the maximum available width, otherwise that element will get width:auto. So just add width:100% like this:
.item p {
margin: 0px;
display: table-cell;
vertical-align: top;
width: 100%;
}
edit: well, now I see it was already answered, but for anyone looking for info, this is why it happens
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I have several div Elements below each other in my HTML document:
#quote
#keyword_tree
#sticky_keywords
#stats
I have all of the float: left currently, and it works on a big screen. Within #sticky_keywords, there are also floated elements which correctly break if the page is very small. The problem is that they are only broken into several lines if the wrapper (#sticky_keywords) is already on a line of its own.
How could I get it to break so that it fits next to #keyword_tree without specifying static widths?
big screen
big http://wstaw.org/m/2011/12/17/m48.png
small screen
small screen http://wstaw.org/m/2011/12/17/m49.png.
Perhaps adding a max-width for the #sticky_keywords so that it always fits next to #keyword_tree?
With this, it works pretty good:
#keyword_tree {
float: left;
width: 200px;
}
#sticky_keywords {
overflow: hidden;
margin-left: 240px;
}
So the keyword tree is fixed (it's a compromise) but the other can use all the space there is.
It works in Firefox, IE9 and Opera:
http://wstaw.org/m/2011/12/17/Auswahl_001_.png
But not so very well in Chromium and Chrome and Rekonq:
http://wstaw.org/m/2011/12/17/Auswahl_002.png
I am not sure how it comes up with the extra margin-right.
First, I wonder if anyone can even say that question title ten times fast.
This should be pretty easy. I've been googling around, and while there are a lot of tutorials on it, I'm having trouble grasping the idea overall. I've even looked at some other SO questions that seem related but I've not been able to make them work.
I have 3 layers. header, menu, body. The real application is much more complicated, of course. But for the sake of this question this is sufficient enough data.
The entire page itself fills 100% width, but the content within each section will be fixed to 1024px wide. This was easily done with the reknown margin: 0 auto; style. So that wasn't an issue.
Here is the trick. The middle layer, the menu. I want the menu to overlap the border between the header and the content. Now then, doing this was also not too hard. I just absolutely position the menu and kick it down by 100px to get it to the right vertical alignment.
What I cannot seem to achieve is the horizontal alignment of the 1024px block. I've included a light fiddle and an image of the expected output (beware, jsfiddle's default preview pane is not 1024px wide, so it looks like it is working at first glance)
Update
Following the instructions at this post I was able to make it work. But it is only functioning in Chrome.
http://jsfiddle.net/dE8xE/
Desired Output (colors exaggerated for emphasis and distinction)
#site-menu {
background-color: #fff;
height: 64px;
position: absolute;
top: 100px;
display: block;
width: 1024px;
/* everything is easy when you have fixed width */
left: 50%;
margin-left: -512px;
}
Can you use percentage margins and width to achieve the effect you're going for? Setting the z-index to something greater than those of the other sections will get it to float over them. Example: http://jsfiddle.net/6xCfU/
margin: 10% 0 0 10%;
width: 80%;
z-index; 100;
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/