I'm brand new to coding, and realize there is probably a very simple solution to my problem. I have imported Photoshop slices into Dreamweaver by using absolute positioning for each slice within a DIV #container (which is how I have been instructed by my professor.)
http://s1292.photobucket.com/user/ajp2487/media/Screen%20Shot%202015-04-10%20at%209.04.27%20AM_zpsbaeyzcdf.png.html
I want to create a horizontal navigation via CSS (blue text) over the placeholder slice (light gray text). To do so, I created an DIV ul li for the links.
http://i1292.photobucket.com/albums/b578/ajp2487/ss_zpswqnc75pl.png~original
I realize that you supposedly cannot float an element when absolute positioning is in play. However, when I remove absolute positioning, try relative positiong, etc. from .nav, ul, the ul disappears (probably behind the slices) and shifts my existing slices. When I do use absolute positioning, the float left command is rendered useless. Right now everything is as it should be, except that I need the ul to flow horizontally, not vertically!
There has to be an simple solution to this; I'm ready to tear my hair out and any help would be appreciated. Please answer in as simple terms as possible!
display: inline-block; will also do the job if you cannot use floats. Does it not work if you put the float on the li?
nav li {
display: inline-block;
}
Here is an example:
http://codepen.io/anon/pen/xboPxB
Another few things to note (though I completely understand the requirements of using Dreamweaver and doing things in a bizarre way due to coursework), position: absolute; can be dangerous and layout breaking, as I'm sure you are discovering; though I won't go into this unless you have any questions as you mention it is due to your instructor.
Line-height should really be unitless - think of it as line-height * font size. If your font size is 20px (or 1em) and line-height needs to come out as 40px (or 2em), then line-height is 2.
I hope I've understood and answered your question correctly! Please let me know if you are still stuck :)
Related
I'm having a frustrating time with HTML and CSS.
Basically, I'm trying to make a website with a layout like
Problem is, the div on the left has a massive margin, which displaces the canvas and makes happen.
I've tried all kinds of solutions of which here are some, with the problems they caused:
Setting the div's display to inline block. This made the div dissapear entirely for some reason, and made it's contents appear to the right of the canvas. (At least it moved the canvas up). I have to point out that the contents weren't actually visible. Ctrl+Shift+I said they were there`.
Changing the div to an inline component (span). Made no difference.
I tried margin: 0px;. This didn't change it at all. margin-left and margin-right to auto just centred the div and didn't move the canvas.
I tried setting manual width/height values for the div. No difference.
There are some solutions that I think are likely to work, but I am reluctant to try them.
I could make a table and add the elements into it, but I heard this is bad practice and would like to avoid it.
I could maually set the positions, but I fear that they might change across devices and resolutions.
I'm at a bit of a loss what to do. I am a beginner at HTML and layouting in general, so please excuse me if it's something really obvious I'm missing.
Thanks for any help.
It's not really "shrinking" you're after. But since I don't know what you're calling your divs and canvas, I'll give you the general solution.
-> https://www.w3schools.com/css/css_float.asp
So basically try adding this:
div, canvas {
float: left;
}
Assuming your div and canvas is a <div></div> and <canvas></canvas>, and that you haven't added a position: fixed; or position: absolute; to any of them.
When I made my HTNL page, it looked perfect, but all of a sudden, I've been getting this huge white space on the bottom of my page. you can see it at http://thomaswd.com/pearinc2. How do I get rid of this?! My stylesheet's at http://thomaswd.com/pearinc2/style.css
If you look at the HTML element with the class back-iphone4s you'll notice it's positioned relatively using CSS.
If you remove the position: relative portion from the CSS rules for .back-iphone4s you'll notice it appears where your white space is.
Using position: relative like this is always horrible, white space appears where the element would have been if it wasn't positioned relatively.
What I would recommend is adding position: relative to the div with devices as its class, then use position: absolute; on .back-iphone4s and set it's position using that method. This way the back-iphone4s element is positioned relatively to it's parent, not relatively to where it would be in the normal document flow.
There are are a number of other ways you could solve this too, at I glance I would be very tempted to just turn those two iphones into one image, less HTML, less CSS and less images to download, but it appears you may have inteneded them to be seperate for a purpose, so maybe that's not a viable solution.
... phew, hope that makes sense, let me know if now.
I just had a quick look at your style, what I saw is technically very ugly.
You set all main elements with position:absolute and made them independent from context and content-flow. And because they are absolute, you have to give them a height - and that causes in things like that ugly white-space.
I would say you have the wrong concept of styling / structuring the page.
Try to use "position:absolute" very rare!
Give a height to the .devices class:
.devices {height: 520px;}
Why is it that the content div stretches to include the menu nav in this fiddle? http://jsfiddle.net/kePCS/
If I remove the float property on nav it doesn't. Since the nav width is set to 100% it still seems to be the same size when i inspect it.
I have to have it floated afaik. It's an integral part of this menu that im using http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
But i still don't want the nav to sit on top of content that should be below. Do you know any workaround? I wouldn't mind an explanation as to why this happens either. I thought since they were both 100% width they wouldn't overlap. Obviously i was wrong. Thanks!
Won't let me post without code, but the fiddle will be easier to understand.
#menu {
float:left;
width:100%;
}
#content{
width:100%;
background-color:#5FC0CE;
}
Floating the content will work, but I personally wouldn't. This is because floating tends to be the source of many IE bugs, and has some more subtle implications that might come back to bite you later.
There's not necessarily a right or wrong way to do this; however, I would instead add a "clear:both;" to #content, which will prevent it from bleeding up into the nav.
While looking for keyboard-accessible menus, I stumbled across this question, which has as its answer a CSS drop-down menu http://jsfiddle.net/cfWpE/. It seems to use styling on the anchors in the menu rather than :hover on the <ul> items to display the submenus without any Javascript, but I can't figure out how.
Could someone who's better than me at CSS explain how this works? I'd like to try to extend this to a 3-level menu, but without understanding how it works for two levels, that's going to be difficult.
edited for clarity:
It's not actually the keyboard part that confuses me; I understand that tabbing through updates :focus on the current focus link, but the only CSS rule that seems to be applied to those elements is
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background: black;
}
I don't understand how setting margin-right to 1 pixel makes the parent <li> visible.
This is an interesting Technique to achieve a dropdown menu.
The list items .list have a very high negative margin-top and a width of 250px. This places their content out of the viewport of the browser. The child anchors a.category have a positive margin-top with exact the same value, so they are visible to the user as if they were positioned normally. Now both, the a.category and the ul.submenu have a float:left applied. that's why the submenu does not appear beneath the anchor, but beside it. (But it has no margin-top, so it is still "invisible") Both elements (a.category and ul.submenu) have 125px width and fit perfectly into the parent li which has a width of 250px. Now on hover the anchor gets an additional 1px margin. This makes both elements too wide to fit into the parent container side to side and so the floated submenu breaks onto a newline and suddenly appears below the anchor - TADA:-D
I hope you could follow my explanation - if not ask please which part I need to clarify;)
Extending this to a third level is not possible - I would just go with a regular css-menu with display:block; and hide. However, you can use absolute positioning and switch the top value from a very high negative value to 0 when hovering, which would have the same effect.
Generally, i would use this with care. Some searchengines consider text that is hidden via negative margins or text-indent as blackhat SEO and may penalize one for that. Although it might be possible that Google is clever enough to recognize this as a regular dropdown-menu
I have a grid of products four wide
http://jsfiddle.net/QpX4f/4/
Why won't margin:0 auto; on the product images centering them? And why aren't those view buttons inline?
http://jsfiddle.net/QpX4f/5/
Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please
edit :: I'll add my two cents to give you some pointers so you can learn.
A few notes, your CSS could use some real organization. This smashing article is great for learning about css.
Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.
For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.
The view button is unnecessarily wrapped in a p tag, which does nothing.
In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)
Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.
answering your new question
your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.
Here you go: http://jsfiddle.net/gVLXV/
So...
ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */
ul.thumb_view li .image { padding:0 0 0 8px; }