Hi,
I try to create columns with album images and some info.
I want the info to overlay for a litle bit on the image next to it.
Like on this image:
However either i break floating left or the text get's totaly on top of the image etc. etc.
Like everything except the desired result.
Some help would be great, here's a jsfiddle:
http://jsfiddle.net/Scf4u/
small piece of the code:
<div class="entrie">
<img class="entrieImage" src="http://doekewartena.nl/temp/images/img02.png"/>
<div class="entrieInfo">
<div class="band">Kids for Cash</div>
<div class="album">No More Walls E.P.</div>
<div class="label">...</div>
<div class="year">1986</div>
<p>-</p>
<div class="tags">rousseau, green, woodsy, band photo, 12IN, tree, civilization, Atco, 1960's, Fuzz
</div>
</div>
</div>
css:
.entrie {
float: left;
}
.entrieInfo {
width: 200px;
float: left;
margin-left: 10px;
}
.entrieImage {
/* if you only set the width then the height will be set automaticly proportional*/
width: 300px;
float: left;
}
http://jsfiddle.net/Scf4u/1/
#entries .entrie:nth-of-type(2n) {
margin-left: -41px;
position: relative;
z-index: -1;
}
Should take every second .entries div and set a negative margin on the left, and a z-index to be underneath the previous div. Might have mixed up my pseudo selector.
Put margin-right: -30px; on .enterieInfo.
Beat by Christopher Marshall. Either or should work.
Related
I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
I'd like to know how to get the following result:
Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the text in the title.
How do I achieve this? I've tried floating the red box on the right but it seems to push the text in the title to the left for some reason.
Edit - For the record, I hadn't posted an example because HTML and CSS isn't really my area of expertise and I'm struggling to get back to an example where the text didn't align (having tried half a dozen different methods I've been reading).
Here's roughly what I was trying: http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>
Move the element up into the header, set it to position:absolute and give it a margin-left:500px;
http://jsfiddle.net/3fgytw0u/2/ <-- that one is right
Maybe it would help you: Link
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
position: relative;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
text-align:right;
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: grey;
}
Alternative approach to positioning can be using negative margin-left equal to width of red area:
h2 {
padding: 10px;
background: #EEE;
text-align: center;
overflow: hidden;
}
h2 .right-block {
width: 50px;
height: 50px;
background: coral;
float: right;
margin-left: -50px;
}
<h2>
Some centered text
<div class="right-block"></div>
</h2>
Here is what you want.
<html>
<head></head>
<body>
<div style="border:green 1px solid;height:700px;" >
<div style="border:blue 1px solid;width:100%;height:200px;text-align:center">
Some Title Text
<div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;">
Some text
</div>
</div>
</div>
</body>
</html>
Red div will float on the right inside the blue one.
That could be simply done by positioning the inner div as position: absolute and putting it right: 0px, but because you need to prevent that it does not start to be positioned with the main display instead, you put position: relative to the outer div too. Also make sure that while writing you put the red div first and then the div which has purple text, or you can just add top: 0px so that you don't care about that anymore.
Then it should work!
Here's a fiddle: http://jsfiddle.net/xg6rove7/
But be wary of the fact that any text in the red box can then overlap the text in the purple, as I have tried to show you in the fiddle. You might b better with using a padding for both sides equal to the box's width, or just use your plain old float: right
I have a div including three inner divs which are all floated left. This floats should represent three columns. So far, everthing's ok.
But if I add headlines inside each of the inner divs and the headlines are to wide, the headlines will overlap.
An image will show it better than 1000 words:
(Sorry for external link. But due to I am new here I have not enough reputation points to post images :) )
My html code looks like this:
<div id="content_container" class="appearance">
<div class="column">
<h1>My headline1111111111111</h1>
text
</div>
<div class="column">
<h1>My headline2222222222</h1>
text
</div>
<div class="column">
<h1>My headline333333333333333333333</h1>
text
</div>
<div style="clear: left;"></div>
</div>
And here is my css code:
#content_container {
position: relative;
}
.column {
float: left;
width: 33.33333%;
padding-right: 10px;
}
.appearance {
margin: 0 auto;
width: 60%;
}
The content_container on the other hand is also an inner div of another wrapper container. Don't know whether it matter in this case.
Any ideas what I could do, to fix it?
I think word-break, with which you can specify if you want to break line within a word, will do the trick:
.column { word-break:break-all; }
jsFiddle demo.
You can read more about the word-break property here.
You can use
.column { overflow: hidden; }
to truncate the header or
.column { overflow-x: scroll; }
to make it scrollable.
I have been struggling with this for over 4 hours now and I can't figure this out.
Usually when I design a site I always have it centered so I never face the problems were divs break out of the layout.
ISSUE 1
I have a sidebar on the left, followed by a content block and then a sidebar on the right.
Each sidebar should be 180px wide and the content block should fill the empty space between those two sidebars.
I can't even get them to float next to eachother now, I could do so before but I am really getting crazy.
Even if I do get them to float next to eachother, when I zoom in the page the content block breaks layout and falls down below the left sidebar it is so super annoying I never had this issue before.
ISSUE 2
The div Block at the header should automatically size between the two logos, similar to what i need for the content_wrapper, how can i do this?
Can someone help me please?
Thanks
HTML
<div id="header">
<div id="left_logo" class="logo"></div> <!-- Logo on the Left -->
<div id="block">This is a block</div> <!-- Div block inbetween the two logos -->
<div id="right_logo" class="logo"></div> <!-- Logo on the Right -->
</div>
<div id="content_wrapper">
<div id="left_sidebar" class="sidebar">Left Sidebar</div>
<div id="middle_content">Middle Content</div>
<div id="right_sidebar" class="sidebar">Right Sidebar</div>
</div>
CSS
html,body {
height:100%;
}
body {
background-image: url('../bg.jpg');
}
#header {
width: 100%;
border: solid 1px;
overflow: hidden;
}
.logo {
width: 180px;
height: 180px;
background-image: url('../avatar.jpg');
border: solid 1px;
}
#block {
border: solid 1px;
float: left;
}
#left_logo {
float: left;
}
#right_logo {
float: right;
}
#content_wrapper {
width: 100%;
}
.sidebar {
width: 180px;
float: left;
}
#middle_content {
min-height: 500px;
width: 100%;
float: left;
}
There are several points to note
move the #right_sidebar before the #middle_content
#right_sidebar must float right not left
#middle_content must not float and not have width: 100%
if you want to have the #middle_content in its own column, i.e. not float below the left and right sidebar, add margin-left and margin-right
The same applies to #header.
See JSFiddle for how this could look like.
Although it's several years old, there's a nice overview of basic layout schemes with CSS at http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
I'm designing a web page with a small label off to the right of the body on some lines. For this, I created an absolute-positioned <div> inside of a relative-positioned one.
The label is appearing exactly as I want it. However, even though the absolute-positioned <div> dimensions are 0 x 0, it still is taking up some room on the line.
This can be seen at http://jsfiddle.net/sznH2/. I would like the two buttons to line up vertically. Instead, the button next to the label is pushed left a few pixels.
Can anyone see what is causing this spacing and how to eliminate it?
HTML:
<div>
<div class="pull-right">
<button>Hello world!</button>
</div>
</div>
<div>
<div class="pull-right">
<button>Hello world!</button>
<div class="outer-relative">
<div class="inner-relative">
<span>XXX</span>
</div>
</div>
</div>
</div>
CSS:
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.pull-right {
text-align: right;
}
.outer-relative {
display:inline-block;
position:relative;
height: 0px;
width:0px;
}
.inner-relative {
position: absolute;
left: 0px;
top: -15px;
background-color: Lime;
}
Inline block elements will render the spacing between the tags. Check this out: http://jsfiddle.net/sznH2/4/
<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>
Remove the spaces and you're good to go
I think You Need to make pull-right postiton:relative
and outer-relative absolute
http://jsfiddle.net/tousif123/sznH2/3/
is this what are you looking for?
.pull-right {
position:relative;
}
.outer-relative {
position:absolute;
}