I'm trying to build a profile page for a network...similar to Facebook profile page. I need the background the tabs are on to go under the profile photo on the left...so when the user updates their status it grows vertically underneath the photo..take a look at Facebook profile page. I've tried placing the status at the top "topStatus" with position: absolute; top: -51px; on the left column "profile_leftside" which works but when more apps are added to the left side it displays past the bottom border..doesn't stay contained in "pageContent".
Basically here's my layout...
<div id="pageContent">
<div id="topStatus">
<div id="innerStatus">
*STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED*
</div>
</div>
<div id="profileContent">
<div id="profile_leftside">
*LEFT SIDE APPS*
</div>
<div id="profile_rightside">
*TAB CONTENT*
</div>
</div>
</div>
CSS
#pageContent {
width: 799px;
min-height:600px;
text-align: left;
margin-left: auto;
margin-right: auto;
float:left;
border-left:1px solid #b3b3b3;
border-right:1px solid #b3b3b3;
border-bottom:1px solid #b3b3b3;
}
#topStatus {
background: #f7f7f7;
border-bottom:1px solid #DDDDDD;
width: 100%;
}
#innerStatus {
padding: 10px 10px 0px 225px;
}
#profileContent {
padding: 8px 0px 8px 10px;
}
#profile_leftside {
float: left;
width: 200px;
position: absolute;
top: 51px;
}
#profile_rightside {
float: right;
width: 580px;
}
Just trying to get "profile_leftside" at the top left without breaking the content at the bottom. Maybe theres a better way to lay this out?
Thanks!
I've always found CSS frameworks to be very helpful. Many of them have been proven again and again, and it takes abstracts you up a layer above having to worry about specific CSS layout problems.
I've used Blueprint CSS for many things, but have also heard good things of the 960 Grid system.
Blueprint CSS: http://www.blueprintcss.org/
960 Grid System: http://960.gs/
Regards,
Chris
It's easier to add any CSS problems to JSFIDDLE.NET so other people can look at the problem directly. I've added it for you and come up with a solution that I think you were looking for: http://jsfiddle.net/SqxN7/12/
The top bar now expands with the left Apps. I had to reorganize the placement of the div's and add 'overflow: auto' to the top status bar to allow it to expand as the app bar is a float.
Related
im attempting to make a grid-style Tumblr theme using inline-block, but there have been some... complications. The posts are automatically aligning with each other vertically. That wouldn't be a problem if they were all the same dimensions, but the posts vary between heights. To sum it up, Im looking to create two columns of posts [of varied heights] that do NOT have any kind of vertical alignment. I've tried a number of different solutions, but nothing seems to work.
The first link is the JSFIDDLE.
This is how it currently looks versus how I would like it to look.
CSS
#entries {
width: 600px;
{block:PermalinkPage}width: 630px;{/block:PermalinkPage}
position: relative;
padding: 0px;
margin: 10px 0px 0px 0px;
}
.posts {
position: relative;
text-align: left;
background: {color:Posts};
width: 250px;
{block:PermalinkPage}width: 500px;{/block:PermalinkPage}
margin: 20px;
padding: 0px;
word-wrap: break-word;
display: inline-block;
clear: right;
}
.posts nth-child(even) {
float: right;
}
Any tips or possible alternatives would be excellent because I cannot for the life of me figure this out. Im starting to think the vertical alignment is just inherent to inline-block?
Only css is hard but you can use a javascript plugin gridalicious here is the link to github https://github.com/suprb/Grid-A-Licious
<div id="container">
<div class="item">
<img src="../">
<p>Text </p>
</div>
<div>
Here an example http://jsfiddle.net/wqfoku85/
Here's my situation: I have a changing image of various sizes (always different) being brought into an area of our splash. I posted a question about this a few days ago and employed the solutions that someone suggested. However, there were other issues that I also had to deal with I am back with an updated page that fixes other problems but I now need to see how to vertically center an image within this new code
First, here's the page: http://americanart.si.edu/index_newsplash3m.cfm
It's the middle image for our blog under the slider. Here's the code and css:
Code:
<div class="middle">
<div class="middleimage">
<img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />
</div>
<div id="middletext">
<p>
<i>The Dying Tecumseh</i> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <i>1812: A Nation Emerges</i>. Visit his new spot among the ...
</i>
<span class="red">Read more...</span> </p>
</div>
</div>
And here is the CSS:
.middle {
float: left;
width: 30.5%;
margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
background: url(/#res/img/americanart_blog_test.jpg) no-repeat #fff;
padding-top: 31px;
text-align: center;
position: relative;
}
div.middleimage { height: 207px;
}
div#middletext {margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
max-width: 291px;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align: middle;
position: relative;
}
I had to create some new nested divs around the image and text in order to keep the text from going into the image area when the image was of small height.
Thanks.
For div.middleimage add this css rule:
display:table;
Then wrap a div around your actual img tag like this:
<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>
And add this rule to your css:
#imagewrap {
display:table-cell;
vertical-align:middle;
}
You can also do this without any tables, simply add line-height: 207px; to your middleimage class and that should center the image inside.
div.middleimage {
line-height: 207px;
}
Centering things vertically in CSS is next to impossible, as far as I know. There's an article I've been meaning to read that may help you: http://designshack.net/articles/css/how-to-center-anything-with-css/
I've been working on website recently and have come across a major problem :http://jimbob.webatu.com/index.html(you'll need to see the coding on the webpage).I've set my website up so that there are two main columns but are centered into the middle.The id wrap is what centers everything together and the two columns float left or right:
#wrap {
width:750px;
margin:0 auto;
background-color:#6E6E6E;
border-left:3px solid #A9E2F3;
border-right:3px solid #A9E2F3;
}
#main {
float:left;
width:496px;
background:white;
border-top-right-radius:5px 5px;
border-bottom-right-radius:5px 5px;
}
#sidebar {
float:right;
width:250px;
} `
Recently though i tried to add a footer bar like with the navigation bar at the top. this has been set to stay in the warp overall by using "clear:both" and have been trying to make it avoid the "wrap" id altogether.However something has gone wrong and the div's that control the "wrap"and "secondborder" won't fully close. Also as you may see a gray bar has appeared behind and the "wrap"background won't apply(I've set the sidebar background to nothing so that the "wrap" background applies to it. This makes it look a bit neater).I cannot paste the required coding as there is too scattered and is too long(look at the page source on the webpage).
Can anyone provide a solution to the "wrap" background and the "footer" not centering? I have only been learning html and coding for the past 3 months so please forgive me if this is a stupid mistake I've made. The link again to my website where the problem is : http://jimbob.webatu.com/index.html
Add the overflow: hidden; to your #wrap as such
#wrap {
width: 750px;
margin: 0 auto;
background-color: #6E6E6E;
border-left: 3px solid #A9E2F3;
border-right: 3px solid #A9E2F3;
height: auto;
overflow: hidden;
}
In order for your #footer to act like a footer at the bottom of your page you will have to take it out of your #sidebar and place it after the closing for #sidebar. This should fix your problems.
To fix the #sidebar being cut off you need to float it left as opposed to right as suc,
#sidebar {
float: left;
width: 250px;
}
Hopefully this helps.
Generally speaking you need to clear after your floating div's. This tells the browser to stop the floating for the next element. Looking at your HTML I'd add before the <div id="footer"> <br style="clear:both" />
Also, before you close #wrap add another <br style="clear:both" />
I just added a new div to your secondborder element: <div style="clear:both"></div> that sorted the problem. You were floating and not clearing the sidebar or the main div.
Sorry for the incredibly stupid question, I feel like in most circumstances I could do this easily, but I'm using sharepoint at the moment and trying to do anything in this is hell!
Basically I have a side navigation (.menu-vertical) that is 230px wide, and a div next to it (.mainContent) that I would like to (padding aside!) fill the rest of the screen.
Unfortunately there are around 798 randomly placed divs, spans and whatever else in the code too that I can't seem to strip without breaking the site, so any advice on exactly how to achieve this would be much appreciated, thank you!
Basically I have a side navigation (.menu-vertical) that is 230px
wide, and a div next to it (.mainContent) that I would like to
(padding aside!) fill the rest of the screen.
..
the basis of the site is in place with a .container div, and the
.menu-vertical (fixed) and .mainContent (fluid, 100%) divs inside.
From what I understand, you're looking for this: http://jsfiddle.net/thirtydot/wv42t/
CSS:
.container {
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
padding: 30px;
border: 2px solid #00f
}
HTML:
<div class="container">
<div class="menu-vertical">menu-vertical</div>
<div class="mainContent">mainContent</div>
</div>
I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child. Why is this happening. I do NOT have any positioning or floating going on.
Please view my HTML:
<ul class="tabs_commentArea">
<li class="">Starstream</li>
<li class="">Comments</li>
</ul>
<div id="paneWrap">
<div class="panes_comments">
<div class="comments">member pane 1</div>
<div class="comments">member pane 2</div>
<div class="comments">member pane 3</div>
</div>
My CSS, the relevant parts of it at least:
#MembersColumnContainer {
width: 590px;
float: left;
padding-right: 0px;
clear: none;
padding-bottom: 20px;
padding-left: 2px;
}
ul.tabs_commentArea {
list-style:none;
margin-top: 2px !important;
padding:0;
border-bottom:0px solid #666;
height:30px;
}
ul.tabs_commentArea li {
text-indent:0;
margin: !important;
list-style-image:none !important;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: right;
}
#paneWrap {
border: solid 3px #000000;
}
.panes_comments div {
display: ;
padding: px px;
/*border:medium solid #000000;*/
height:150px;
width: 588px;
background-color: #FFFF99;
}
You could set max-width on either, or both, of the div elements to prevent their expansion:
#containerDiv {
min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
width: 50%; /* defines the normal width of the div */
max-width: 700px; /* prevents the div expanding beyond 700px */
}
It might also be that you're allowing the div's overflowed contents to be visible, as opposed to hidden (or auto). But without specific examples of your mark-up and css it's very difficult to guess.
Generally giving elements layout is pretty straight forward (always assuming you have a good understanding of floating, positioning and the box model), and in most cases you wouldn't have to use max- min-width to control elements on the page.
My two cents: If I was you, I'd start stripping out code (starting with the !important rule), and see when the problem is solved. De-constructing the code like that is a good way to find bugs.
Sorry I couldn't help, but I'm reluctant to give advice since the code you provided shows a lot of other stuff going on elsewhere that might be contributing to your problem (like having to use !important).
:D
I figured out the problem. The file that was calling in the css was conflicting with another external css file that had the same element with the same name in it. Thank you all for your help though.