I've designed a layout in PS, using a 12 column grid, and want to make it work in Wordpress.
I'm using Reverie theme to start with, wich is a framework theme thingy that works on Foundation.
I got my header working like it should, but the content below it wont adjust to the screen size.
Ill post the code I have below:
page.php:
<?php get_header(); ?>
<div class="container">
<!-- Row for main content area -->
<div class="large-12 medium-12 small-12 columns" id="content" role="main">
<div id="top-content" class="large-12 medium-12 small-12">
</div> <!-- end top-content">
<footer>
<center><p class="copy">© <?php echo date('Y'); ?> Roelof Plas. Ontwerp door <span class="roelof">roelofplas.nl.</span> Alle rechten voorbehouden.</p></center>
</footer>
</div>
</div>
<?php get_footer(); ?>
style.css:
#top-content {
width: 1140px;
height: 530px;
background-color: #63bcb8;
z-index: 1000;
top: -48px;
position: absolute;
}
What it's supposed to look like (just the turquase div):
I can't post images yet (need 2 more rep) so click this.
Live version: click me
Please tell me what I'm doing wrong. I read a ton of tutorials about Foundation and grids etc, but I can't get it right.
If you need more info from me or anything please tell me.
Regards,
Roelof Plas
SOLUTION BY Joel, thanks mate! Can't rep u yet but I will when I can! :D
Remove the "width: 1140px;" from your #top-content class, the .columns and .large-12, .medium-12 etc from foundation will take care of the responsiveness.
The reason your footer isn't showing up is two fold: One, you should replace position:absolute on #top-content with #position:relative. Using position:absolute takes the DIV out of the DOM flow and causes your footer to hide 'behind' it.
You also have an unclosed comment:
end top-content"> should be end top-content -->
With those changes your footer should then show up correctly and the main turquoise DIV will become responsive.
> You haven't used "columns" class on this.
> You don't required any kind of width when you applying "-12" in every class.
> And if you still willing to provide height on this **ID** "#top-content". then use media query to give width on every other size.
<div id="top-content" class="large-12 medium-12 small-12">
Related
I'm new to CSS-frameworks.
Normally I start my markup within the body by adding a div with the class "wrap". The purpose of that, is to get the content horizontally centered. And for having a top-, bottom-margin.
Now with Foundation I would like to keep that approach. But I'm not sure where to put the "wrap"-div.
That's what I got currently:
.wrap {
margin: 10px auto;
}
<div class="wrap">
<div class="row">
<div class="small-12 columns">
<div class="callout">
<h1>Lorem Ipsum</h1>
</div>
</div>
</div>
</div>
Demo with Foundation added on CodePen: http://codepen.io/mizech/pen/LWBOvQ
I mean: It works but I'm not sure if I do it right.
Shall I keep it the way it is? Or should I put the "wrap"-div somewhere else?
Should I perhaps leave the "wrap"-div at all (when using Foundation) and doing something else instead?
You don't need a wrap div. Foundation has a maximum width set on the .row so anything inside it will conform to that grid. If you need you can add a class with vertical margins or padding to that row. If you need a full width row you just add the class .expanded to it.
I have two div's in one wrapper div, see the following situation:
<div class="container">
<div style="display:table;" class="row row-mobile fp-white-row">
<div style="display:table-cell;" class="col-sm-6 portfolio-post-l">
<h1><?php the_field('port_kop_linker_kolom'); ?></h1>
<?php the_field('port_inhoud_linker_kolom'); ?>
</div>
<div style="display:table-cell;" class="col-sm-6 portfolio-post-r">
<h1><?php the_field('port_kop_rechter_kolom'); ?></h1>
<?php the_field('port_inhoud_rechter_kolom'); ?>
</div>
</div>
</div>
I would like portfolio-post-l to be the same height as portfolio-post-r and the other way around if necessary. How can I accomplish this? it is needed because the portfolio-post-l has an border and should stretch to the bottom of the wrapper div row row-mobile fp-white-row.
I know a solution is to give the portfolio-post-r a left border, but what if the right border becomes the shortest div? I need to ensure it works both ways no matter who's the taller div.
Here an image of my current layout
I have searched online for about an hour and couldn't find any simple solution, all had to do with JS or display:table that did not work for me.
Is it really that inconvenient to include this functionality?
thanks!
EDIT 01
I have no CSS applied to my .portfolio-post-l & .portfolio-post-r other then a background color and a border. However, Bootstrap applies CSS to the col-sm-6, here's that CSS:
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
I just found out, thanks to Krzysiek that col-sm-6 is messing up the table display fix. If I remove that class, it works, however, I would like to keep it because it's a Bootstrap class used for laying out the page....
Here's a Fiddle of my layout
I think it has to do with positioning, anybody any suggestions?
Thanks!
/Edit 01
Evening all,
I'm having a little trouble with the grid system and am looking fir a bit of guidance here.
Take the following code for example:
<div class="container">
<div class="row"> <!-- PROBLEM -->
<div class="col-md-12">
<div class="problemclass">
</div>
</div>
</div> <!-- /PROBLEM -->
</div> <!-- /container -->
</header>
<main>
<div class="container">
<!-- WORKS -->
<div class="row">
<div class="col-md-4">
<div class="notproblem">
{CONTENT}
</div>
etc...
As you can see, I've marked a row as PROBLEM in the header and it contains a 12 column span. The CSS for problem class is set at about 300px height and a background image (It is set at 300px because the background image is 300 px in height). the code looks like this:
.problemclass{
height: 300px;
background: url('background.png');
}
Everything stacks and lays out perfectly... until I size the browser down to test the stacking. At this point, the row marked PROBLEM will begin to completely overlap the row marked WORKS; the content will overlap the background image, and the actual div goes under the background image! I have no freaking clue why LOL! My guess is that maybe I cannot have just a background with a set height and expect it to work?
Any advice would be appreciated, and I hope I was clear enough.
Also note that there are 2, 6 column grids above the 12 column grid in the same row that I did not include in attempt to keep the code a little more clean and clear.
Please check out this website --> http://justicecup.radiantwebtools.com/
The section underneath the nav/logo/social-media area is further apart in Firefox as opposed to Chrome/Safari (the desired separation).
The issue seems to have to do with this part of the HTML:
<div class="header-container">...</div> <!--- Okay... --->
<div class="row content"> <!--- DevTools shows this the right underneath the header area...okay, thats correct --->
<div class="width-container">...</div> <!--- on Chrome/Safari it's good. On Firefox, this is pushed down further....why? --->
</div>
I have tried giving the header area some css to work against this, to no avail
.header-container { overflow:none;}
This screenshot shows the difference too --> http://screencast.com/t/CrF9HEaki
Thanks for your help.
I think the issue might have something to do with collapsing margins.
One fix for the issue, is to change the two rules below:
#template .content .story-primary {
margin-top: 28px;
}
#template .content .story {
margin-top: 62px;
}
to:
#template .content .story-primary {
padding-top: 28px;
}
#template .content .story {
padding-top: 62px;
}
Your page layout is quite complex and I think part of your problem stems from using .width-container in two unsuitable places. I've been fiddling with the css using the browser's inspect element, however when I change the styling in one it cascades to the other. I think a redesign of your page would be helpful. I would suggest enclosing the whole page content (excluding the background) in a div and applying the width-container styling to that.
<div id="body">
<div class="width-container">
<div id="templatewrapper"> ... </div>
<div id="templatefooter"> ... </div>
</div>
</div>
Next you should rename the width-container around the header stuff to something more appropriate.
<div id="page-header">
<div class="logo"> ... </div>
<div class="rwtmodule navigation-module meganav"> ... </div>
<div class="social-media"> ... </div>
</div>
After doing this you should replace the float:left; on the logo, navigation and social media to display:inline-block and get rid of the various margins. Then apply a padding or margin to the #page-header to push them down. The .logo and .social media will be in the wrong place but you can use position:relative and top:/*some value*/ to correct this.
After doing this, the site should look like the current firefox version in both firefox and chrome. You can then move the main body of the page up using relative positioning as you did with the logo and social media.
Remember to test this out in a safe location first!
Hope this helps.
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help