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/
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%;
}
sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
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/
(source: ctrlv.in)
I am facing this issue in my responsive design website,when i reduce the width of the browser less than approx 700 pixels.
i added margin-left: auto;
margin-right: auto;,but the output remain unchanged.If i put left:50%,it shows some weird perhaps position because my header is postion:fixed(though i have not mentioned its top/left/right/bottom anywhere else).
The logo "ilovetrolls" starts from the center of the page....and hence the center of the image is not centered.The page
(source: ctrlv.in)
Any help would be appreciated.Thanks a lot
just remove this style
#header {
text-align: center;
}
placed inline line no 428 in media only screen width 767
You need to change the display property of the #topdiv1 (on line 663) to display: block. I fiddled around in my Chrome web inspector and got it to work that way. Couldn't hurt to set the float to float: none either.
Take div.#topdiv3 and remove float: left and add in margin-left: auto; margin-right: auto. Then move div.#topdiv3 outside of div.#outter-wrapper
Try something like this:
<style>
.container {
margin-left: auto;
margin-right: auto;
/* To see the affect of the above; not part of centering implementation. */
background-color: #aaa;
width: 200px;
}
</style>
<div class="container">
Hello, world!
</div>
I am using float and then clearing both. but still i have getting some error in the layout. can some one point out what the problem is ?
http://uniquedl.com/3closets/about.html
i want Sneak-peek control div and sneak peek products div to be next to each other. i am using this code to make it next to each other
.grid {
display:inline;
float:left;
}
But sneek-control is taking a lot of margin to the left and not sitting below the above div block
i want the layout to look like this
If you set a height on your .intro-image to 384px same size as image it should work.
.introduction .intro-image {
width: 288px;
height: 384px;
}
.sneak-peek {
clear: both;
float: left;
height: 288px;
text-align: left;
}
should do it.
You also have some problems there... check IE 7 after you finish. Probably they'll clear out by themselves.