I am trying to do 3 columns page and I have problem.
My html:
<?php
$this->headMeta()
->setIndent(8)
->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8')
->appendName('keywords', 'story')
;
$this->headTitle()
->setIndent(8)
->setSeparator(' - ')
->headTitle('Your Story')
;
echo $this->doctype();
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="<?php echo $this->baseUrl(); ?>" />
<link rel="stylesheet" type="text/css"
href="<?php echo $this->baseUrl('/styles/site.css'); ?>" />
<?php
echo "{$this->headMeta()}
{$this->headTitle()}
{$this->headLink()}"
?>
</head>
<body>
<div id="BODY">
<div id="HEADER">
<div id="headerLogin">
<div id="logged-in-as">
<?php echo $this->loggedInAs(); ?>
</div>
</div>
<div id="IMAGE">
<img src="../images/write.png" alt="" height="20%" width="90%" />
</div>
<div id="LOGO">
<img src="../images/logo.png" alt="Your true Story..." height="30%" width="160%"/>
</div>
<div id="USER">
</div>
</div>
<div id="MENU">Menu:
<div id="MENU_IN">
<div id="LIST">
<ul>
<?php
echo $this->menuLinks();
?>
</ul>
</div>
</div>
</div>
<div id="CONTENT">
<img src="../images/ScG.png" alt="" height="10%"/>
<div id="CONTENT_IN">
<?php echo $this->layout()->content ?>
<img src="../images/ScD.png" alt="" height="10%" />
</div>
</div>
<div id="INFORMATIONS">
<?php
$auth = Zend_Auth::getInstance();
if ($auth->hasIdentity()) {
?>
Your profile:
<div id="INFORMATIONS_IN"
<div id="LIST">
<ul>
<?php
echo $this->usersProfilLinks();
?>
</ul>
</div>
</div>
<?php } ?>
</div>
<div id="FOOT">Iwona Jamroz</div>
</div>
</body>
My CSS:
body
{
background-image: url(../images/back.png);
background-repeat: repeat;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
overflow: visible;
height: 100%;
}
#IMAGE {
margin-top: 15px;
margin-left: 8%;
float: left;
}
#LOGO{
margin-top: 5px;
margin-right: 25%;
float: right;
}
#HEADER{
margin-bottom: 15%;
}
#MENU {
width: 20%;
height: 10%;
background-image: url(../images/texMenuBack.png);
margin-right: 5px;
float: left;
}
#MENU_IN
{
margin-top:10%;
height: 10%;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
background-image: url(../images/texMenuMid.png);
}
#CONTENT{
margin-left: 21%;
margin-right: 21%;
float: left;
}
#CONTENT_IN {
padding-left: 8px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-image: url(../images/texM.png);
background-repeat: repeat;
min-height: 150px;
}
#INFORMATIONS {
width: 18%;
background-image: url(../images/texMenuBack.png);
margin-left: 5px;
float: right;
}
#INFORMATIONS_IN{
margin-top: 14%;
margin-bottom: 4px;
margin-left: 3px;
margin-right: 3px;
background-image: url(../images/texMenuMid.png);
}
#FOOT {
clear: both;
vertical-align: middle;
}
#headerLogin a{ color: white;
text-align: left;
word-spacing: 3px;
font-family: fantasy;
font-size: 24px;
}
#headerLogin {
color: whitesmoke;
font-family: monospace;
font-size: 24px;
}
#LIST {
}
And I have 3 columns but one after another and I can not understand it as I have read that to do 3 columns layout is enought to write in CSS float: left, float: left, float: right but I all the time have one after another not in one row :/ Why?
It looks like this:
aaa
.......aaaaaa
...................aaa
Floats are tricky and you should try to test it with different browsers. However, I did notice this
#CONTENT{
margin-left: 21%;
margin-right: 21%;
float: left;
}
Try to remove the margin-left and margin-right, because it probably causes the effect you are describing.
Try this instead:
#CONTENT{
width: 20%;
float: left;
}
I would consider using a CSS Framework such as 960 or Blueprint CSS, it will make columned layouts incredibly easy and cross-browser compliant. With CSS frameworks there is no need to write layout CSS, eliminating a great deal of browser compatibility testing and it helps keep your presentational CSS clean and tidy.
Your html will end up looking something like this (example is in 960)
<div class="container_24">
<div class="grid_8"></div>
<div class="grid_8"></div>
<div class="grid_8"></div>
</div>
Explanation: A 24 column container, where each column is 8 columns wide, will result in a 3 column layout.
Related
my get_bloginfo ( It is wordpress code which calls the text of "My WordPress Blog" ) doesnt be centered.Here is the codes:
<!-- header -->
<header class="header clear" role="banner">
<!-- logo -->
<div class="logo">
<a href="<?php echo home_url(); ?>">
<!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo" class="logo-img">
</a>
</div>
<div class="strip"></div>
<div class="slogan"><?php echo get_bloginfo($show='description'); ?></div>
<!-- /logo -->
<!-- nav -->
<nav class="nav" role="navigation">
<?php html5blank_nav(); ?>
</nav>
<!-- /nav -->
</header>
.logo-img {
display:block;
margin-left: auto;
margin-right: auto;
}
.strip {
margin-top:-30px;
background-image: linear-gradient(0deg, #cf9008 50%, #cf9008 50%, #cf9008 100%);
height: 20px;
width: 100%;
z-index: 100;
background-size: 100%;
}
.slogan {
display:inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
the link:
http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/03/fhhfh/
.slogan {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
this is your css code. Change display:inline-block property to display:block
Change:
.slogan {
display:inline-block;
margin-left: auto;
margin-right: auto;
text-align: center
}
To:
.slogan {
text-align: center
}
I know this is probably totally against the whole idea of the grid system and the responsiveness but let's just assume I want to do the following anyway:
I have the layout that you can see in the picture below.
The problem is initially the whole image+text part takes col-md-9 and the twitter feed takes col-md-2 span on a 1920x 1080 screen. However when displayed on a screen of smaller resolution like 1280x800, I can keep the SAME LAYOUT by changing the image+text part to take up col-md-5 span. So my question is, is it possible to change the element's col-md class using media queries ? I know CSS cannot touch an elements classes but I thought maybe bootstrap came along with a solution. Otherwise I know I can use JavaScript to get the window size and swap the classes.
Here is some code should you need. I didnt want to post any code that is not relevant but if you guys need the whole thing, I can set up a jsfiddle prob.
Thanks ! 1
HTML:
<div class="newsfeed">
<div class="container">
<div class="row">
<div class="col-md-11 mainfeed">
<div class="row top-buffer">
<div class="col-md-3">
<img src="images/chris.jpg" width="190px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some text here</h2>
<p id="bodypart">Some more text here </p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/city.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some news text </h2>
<p id="bodypart">xxxxxxxxxxx
</p>
</div>
</div>
</div>
<div class="col-md-1 pull-right">
<!-- Tweet RRS-->
<div class="tweets pull-right">
<a class="twitter-timeline" href="https://twitter.com/sinanspd" data-widget-id="540693554432323584"
width="380px" data-chrome="transparent noscrollbar">Tweets by #sinanspd</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>
</div>
</div>
</div>
</div>
</div>
Relevant CSS:
/* ----------COMMON STYLING ------ */
body{
background-color: black !important;
}
.container{
width: 100%;
}
.jumbotron{
height: 340px;
background-size: cover;
background-image: url("images/banner.jpg");
background-repeat: no-repeat;
background-position: center;
}
.nav li{
display: inline;
margin-right: 130px;
}
#nomarginleft{
margin-right: 0px;
}
.nav a{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
text-decoration: none !important;
}
.pull-left{
margin-left: -350px;
margin-top: -30px;
}
.pull-right{
margin-right: -300px;
margin-top: -30px;
}
.nav{
background-color: black;
width: 100%;
}
.fixed {
position: fixed;
top: 0px;
height: 50px;
z-index: 1;
background-color: black;
}
/*--------------------- HOME PAGE ---------------- */
#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
border-radius: 4px;
background-color: white;
}
#display ul{
position: relative;
margin: 0;
padding: 0;
height: 960px;
width: 420px;
list-style: none;
}
#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}
#head > p{
font-family: "Crimson Text";
font-size: 30px;
font-weight: bold;
}
#head{
margin-top: 30px;
margin-left: 220px;
}
.newsfeed{
width: 86%;
height: 800px;
margin-left: -160px;
}
.mainfeed{
margin-left: 130px;
}
.pullup{
margin-top: 0px;
}
.top-buffer{
margin-top: 20px;
}
.topborder{
border-top: 1px solid white;
}
.tweets{
background-color: rgba(247,12,12,0.3);
border: 1px solid white;
margin-left: 50px;
border-color: white;
}
#media (min-width: 1000px) and (max-width: 1300px){
.jumbotron{
height: 250px;
}
.nav li{
margin-right: 50px;
}
.nav a{
font-size: 25px;
}
.pull-left{
margin-left: -60px;
}
.pull-right{
margin-right: -40px;
}
#display{
width: 700px;
height: 350px;
}
#head > p{
font-size: 25px;
}
#head{
margin-top: 30px;
margin-left: 80px;
display: block;
}
.newsfeed{
width: 86%;
}
.newsfeed h2{
font-size: 20px;
}
.mainfeed{
margin-left: 230px;
}
.newsfeed h2, .newsfeed p{
margin-left: 0px;
}
.top-buffer{
width: 800px;
}
.newsfeed .pull-right{
margin-right: -120px;
}
.tweets{
margin-right: -500px;
}
}
Why don't you change your code like below
<div>
<div class="col-lg-9 col-md-5">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
<div class="col-lg-3 col-md-5">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
</div>
So now, on bigger screens the screen will we divided 9 cols and 3 cols, on smaller screen sizes it will be 5 cols each.
If you want to change the layout for smaller screen i.e. tablets and screen just user col-sm-xx and col-xm-xx respectively.
I'm busy with my first attempt to responsive webdesign and i'm trying to put 2 images next to eachother. When I view the website on a desktop computer the page layout is just fine. But when i'm viewing it on a mobile (or I resize the window) the 2 images at the bottom are not inline anymore and jump on top of eachother.
Any idea how to solve this?
The page is on this test host: www.igga.nl.
Here's my markup:
#media screen and (max-width: 568px) {
#footer {
position: fixed;
left:0px;
bottom:0px;
height: 110px;
border-top: 7px solid #fff;
background-image: url('../images/bg_footer.png');
background-repeat: repeat;
width: 100%;
}
#pos {
width: 100%; /* parent */
}
#footer-info {
width: 100%;
float: left;
}
#centerpos {
width: 94%;
margin: 0 auto;
}
.tree {
float: left;
margin: 10px 1.76056338028169% 0 0;
width: 6.69014084507042%; /* 427 / 960 */
}
.logo-cont {
border-bottom: 0;
}
.logo {
margin-top: 18px;
width: 91.54929577464789%;
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
.info-cont {
clear: both;
width: 100%;
margin: 2px 0 0 8.45070422535211%;
}
.info {
margin: 3px 0 0 0;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
font-size: 0.875em;
}
.info a {
display: inline;
text-transform: lowercase;
text-decoration: none;
color: #000;
}
.info-telnr {
margin: 3px 0 0 0;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
font-size: 0.875em;
}
.info-telnr h5 {
display: inline;
text-transform: lowercase;
text-decoration: none;
letter-spacing: 1px;
color: #000;
font-size: 1em;
}
}
and this is my HTML:
<div id="footer">
<div id="pos">
<div id="footer-info">
<div id="centerpos">
<img class="tree" src="sites/all/themes/md/images/logo_tree.png">
<div class="logo-cont">
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('MD | Illustration & Design'); ?>" rel="home" id="home">
<img class="logo" src="<?php print $logo; ?>" alt="<?php print t('MD | Illustration & Design'); ?>" />
</a>
<?php endif; ?>
</div>
<div class="info-cont">
<div class="info">
mail info#example.nl
</div>
<div class="info-telnr">
phone <h5>+31600000000</h5>
</div>
<div class="info">
shop www.thepossiblemachine.nl</p>
</div>
</div>
</div>
</div>
</div>
Try to set float:left for both divs/images. It helps in many cases but I can't tell if it will be useful in your problem without the code. It should look something like:
<div id="image1" style="float:left">
<img src="images/yourimage1" alt=""/>
</div>
<div id="image2" style="float:left">
<img src="images/yourimage2" alt=""/>
</div>
I hope this helps.
I have a 9-box with a div structure like so:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBRight"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
</div>
And have the following CSS Rules:
.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}
Everything is in the right place and has the right attributes however, the NBLeft and NBRight elements of the middle row are not taking up any height. Using height:100% does not have any effect.
I have added   and still nothing.
I am usually good with this sort of stuff, but I am stumped. Does anyone have any advice?
your NBleft & NBright are self closing make it like <div></div>
Are self closing divs supported correctly in the HTML Version you're using? You could try using instead?
I can see...
<div class="NBMiddle">SharePoint WebPart goes here<div>
Should be ...
<div class="NBMiddle">SharePoint WebPart goes here</div>
Other thing to try is overflow:auto in the CSS class of the div givin you trouble. As long as the div has content, the CSS will make sure it's displayed.
I'm not 100% sure what you're trying to do, but does the below help? I've added borders to everything so you can see what's happening.
The HTML...
<html>
<head>
<link rel="stylesheet" media="screen" href="bla.css" >
</head>
<body>
<div class="NBWrapper">
<div class="NBrow">
<div class="NBcell">Top Left</div>
<div class="NBcell">Top Middle</div>
<div class="NBcell">Top Right</div>
</div>
<div class="NBrow">
<div class="NBcellFullHeight">Middle Left</div>
<div class="NBcellFullHeight">Middle Middle</div>
<div class="NBcellFullHeight">Middle Right</div>
</div>
<div class="NBrow">
<div class="NBcell">Bottom Left</div>
<div class="NBcell">Bottom Middle</div>
<div class="NBcell">Bottom Right</div>
</div>
</div>
</body>
</html>
Then the CSS...
.NBWrapper {
width: 800px;
margin: auto;
}
.NBcell {
width: 266px;
float: left;
border: 1px solid #000000;
}
.NBrow {
float: left;
width: 804px;
border: 1px solid #000000;
}
.NBcellFullHeight {
width: 266px;
float: left;
height: 500px;
border: 1px solid #000000;
}
What i ended up doing was restructuring the divs:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
<div class="NBRight"> </div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
</div>
Taking away the floats and the margins in the attributes and adding this:
.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}
.NBLeft, .NBRight, .NBMiddle {
display: table-cell;
}
You might ask, why not just use a table? SharePoint 2010 may use less of them, but but its still tables all the way down. I prefer using div structures.
What I'm trying to do is to change the background color on the whole "row" div on mouse over and open the href link clicking on any part of the div. I have tried all the solutions I found on SO (both with jquery and pure css) but I can't get it working
Here is my code:
HTML
<div id="row">
<div class="document-date"><?php the_time('d-m-Y') ?></div>
<div class="document-category"><img src="/images/icon.png" /></div>
<div class="document-title">My link
<p>some description</p>
</div>
And the CSS
#row {
position: relative;
width: 700px;
padding: 5px 0 5px 10px;
display: block;
float: left;
}
#row:hover {
background: #fbf5d8;
}
.document-date{
float: left;
color: #1b6392;
font-size: 12px;
margin-right: 10px;
line-height: 35px;
}
.document-category{
float: left;
margin-right: 10px;
line-height: 35px;
}
.document-title {
width: 350px;
float: left;
color: #020100;
font-size: 12px;
font-weight: normal;
margin-top: 1px;
text-decoration: none;
}
.document-title a{
width: 350px;
float: left;
color: #020100;
font-size: 14px;
font-weight: bold;
margin-top: 1px;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.document-title a:hover{
color: #fff;
}
Any suggestion?
Assuming when you say li, you mean div#row
CSS:
#row:hover {
cursor: pointer
}
JavaScript (using jQuery):
$('#row').click(function() {
// do something
// example:
$(this).find('a:first').click();
});
<div id="row" onclick="alert(1)">
<div class="document-date" >12-08-2014</div>
<div class="document-category" ><img src="/images/icon.png" /></div>
<div class="document-title" ><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>
This would do the trick.
Or if you want the divs separately
<div id="row">
<div class="document-date" onclick="alert(1)">12-08-2014</div>
<div class="document-category" onclick="alert(1)" ><img src="/images/icon.png" /></div>
<div class="document-title" onclick="alert(1)"><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>