I was wondering if someone could explain why my navigational sprite isnt showing up next to my links. I have set the url and width so I am unsure what is going wrong:
http://jsfiddle.net/spadez/uZzBW/11/
.nav-sprite {
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
width: 30px;
}
Assuming you want the icons inline with the links, I would suggest something like this:
.nav-sprite {
background: url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
width: 30px;
height: 30px;
display: inline-block;
}
You could also add vertical-align: middle; to better align it with the text.
Spans are not block elements like divs - they are inline elements. So they essentially "collapse". Adding height, width, and display:block will solve it. There are other methods too, but this is pretty straight forward.
width: 30px;
display:block;
height:30px;
added to .nav-sprite exposes the sprite. I will let you position the final pixels/height/width.
see my fork http://jsfiddle.net/Hs8m5/
Related
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
I want to know is there a way to centre text vertically without the use of a container element. something which is responsive.
EDIT
the only value I would know is the height of the h3 element, nothing more,
content will appear underneath some as etc
CSS
h3 {
height: 140px;
padding-top: 80px;
min-height: inherit;
border: 1px solid black;
text-align: center;
}
HTML
<h3>TEST</h3>
Here is an example of what i want to achieve
codepen test
Line-height is a beautiful thing, especially if its just text. And if you want to be responsive:
h3 {
background-color: transparent;
height: 40vh;
line-height: 40vh;
min-height: inherit;
border: 1px solid black;
text-align: center;
}
There is no easy way to do this. I have come up with a couple techniques over the years.
You have 80px in padding and a height of 140px for a combined height of 240px. If you know that the text will not exceed one line you can do it using line-height.
h3{
line-height:240px;
...
}
Another way is to use padding if you know the height of your text.
h3{
font-size: 20px;
line-height:20px;
padding:110px 0;/* (240-20)/2 */
...
}
note: I don't like the display: table-cell hack and have yet to need it. Why move away from a table based layout if you're just going to tell the browser to treat the element as a table?
Add to your code:
display: table-cell;
vertical-align: middle;
You will need to adjust your padding. That should work.
This article provides 6 different methods and their associated pros and cons; it explains it far better than I could here. The solutions provided as answers here are good, but the article really covers niche cases and allows you to choose the best method to fit your needs.
http://www.vanseodesign.com/css/vertical-centering/
You're going to have a containing element, regardless. It's just that the body might be the container.
You could do this:
body {
height:100%;
display: table;
margin: 0px;
padding: 0px;
}
h3 {
display: table-cell;
vertical-align: middle;
}
OR...
body {
height:100%;
margin: 0px;
padding: 0px;
}
h3 {
position: relative;
top: 50%;
}
edit - removed width specific styles as it has nothing to do with the solution. Thanks to Jason for the margin/padding set to 0px to remove ugly scrollbars. Jason also noted that this solution did not work for Chrome unless the "body" element in the styles was changed to "html, body", but I was not able to replicate this problem using Chrome version 35.0... For good measure I also opened a test page in Safari and Firefox and they also worked as expected.
edit^2 - Figured out the problem Jason saw. If you use the html5 doctype, then, yes, you will have to include the html element with the body style. This also makes the scrollbar reappear in the relative position solution. So that's fun. I will leave this up for the purpose of saving frustration in the future, but I would check out the link provided in Jason's solution.
http://phrogz.net/CSS/vertical-align/
How can I vertically center text in a dynamically height div?
I have a homework for an internship and I have to replicate a webpage from a picture. Here's their picture and beside it is what I got so far: image+image
I don't know how to put those textarea near the text when the resolution is higher. At 1024x768 (which is the minimum imposed) it looks good, but when I maximize the window, this happens. :/
Here's the code: jsfiddle. I'm not sure about it, but could someone help?
Cheers!
Ok, I tried to hackish solve the hackish.
Because:
You had the <textarea> inside a <p>.
I took them out and put a div around.
The textarea had float: right inline, and float: left in the stylesheet. The inline won due to specificity.
The float does not give the parent container a height (without "clearfix") so I took
display: inline-block.
I tried to solve it with:
p.label {
display: inline-block;
vertical-align: top;
position: relative;
top: -10px;
}
.intro {
width:82%;
display: inline-block;
background-color:#fff;
text-align: right;
margin-right: 0.5em;
}
All that said, I still have the 12" notebook screen and do not know if it works and if you like it. Please give me a shot, if something is not working.
JSFIDDLE: http://jsfiddle.net/jQmM4/1/
I'm in the midst of making a navigation bar. I came here earlier and got some help re-organising and coding said item. All seemed great and it seemed like it should work but when using the following code instead of each image resizing, it only showed X% of the images height and Y% of the images width. I cannot figure out what is going wrong.
CSS:
#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }
#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }
Please refer to how it looks looks on my website to see what I mean.
Please also refer to my other navbar question.
Thank you.
Background images don't resize. They are shown in full size and are clipped if the container is smaller.
What you can do:
The best approach is to resize the images to the target size
A hackish approach is to use absolutely positioned <img> tags as background and <span> text as foreground.
<div class="hasBg">
<img>
<span>text</span>
<div>
.hasBg{
position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
position:absolute;
top: 0;
bottom: 0;
left: 0;
}
.hasBg span{
position:absolute;
}
A native but new feature is to use the new CSS3 background-size. but this is not cross-browser afaik
Since you've done it as a background image, the width and height attributes only apply to the div, not the image.
You have two options.
Resize your images to fit the dimensions
have your images on your page and use javascript for your hover effect
Hey guys I have an interesting set up going on. I'm working on creating SOME mobile support for an existing site. Basically when the window is brought to a certain size or the page is opened up on a phone I want to the header to do something different. That part is easy the only thing I'm running into is this.
The basic structure of my header is this
[logo][user-stuff][right-side][1][2][3][/right-side]
These elements are all in a nice line in my header. My problem is that in mobile I need one of the elements from inside the containing div on the right to float underneath the header. So I either need it to pop outside of its container or I need its container to take up with the width of the screen. The idea is that it will end up looking like this.
[logo][user-stuff][right-side][1][2][/right-side]
[ 3 ]
any ideas how this can be done? If I have to use some Javascript to make this possible that's fine, but the markup needs to be minimal as per my bosses instruction. Just a little stumped on the direction.
current html
<div id="header">
<div id="logo"></div>
<div id="user-stuff"></div>
<div id="right-side">
<div id="1" class="right-side-section"></div>
<div id="2" class="right-side-section"></div>
<div id="3" class="right-side-section"></div>
</div>
</div>
current css
#header {
height: 48px;
width: 100%;
}
#logo {
display: inline-block;
vertical-align: top;
}
#user-stuff {
display: inline-block;
vertical-align: top;
}
#right-side {
display: block;
float: right;
}
.right-side-section {
display: inline-block;
vertical-align: top;
}
Of course this is just a little bit of mockup code to give you an idea of the structure i'm working with and how everything is laid out. I just need to figure out a way to have div#3 drop underneath everything and take up the width of the screen when the screen is a certain size. Not sure how to have it breaks it's flow.
Since the header has a defined height this will be easy. Just add position: relative so that you can absolutely position child elements relative to itself.
Then you can set the css for div#3 to use absolute positioning as in the following example.
#header {
height: 48px;
width: 100%;
position: relative;
}
#3 {
position: absolute;
top: 48px;
left: 0;
width: 100%;
text-align: center;
}
See working Demo here: http://jsfiddle.net/Cce9n/
Please note that it is not valid to assign an ID starting with a number.
You may use Javascript to edit other div definitions,
E.G. changing the text-align style
document.getElementById("right-side").style.text-align = "center";