I´m having a problem with divs when I´m trying to apply background-color to #header for example so it will cover all of the header.
it dosen't show any changes that I made to the css of the #header, #maincontainer and more can you please help me I have tried so many things and nothings seems to work.
Here is the Html sample :
<div id="wrapper">
<div class="container">
<div class="span-24 showgrid">
<div id="header">
<div id="logo"><img src="logo.png" alt="Iris logo"></div>
<div id="slogan">
<h1>Íris</h1>
<h2>Ættleiðingartengd fræðsla</h2>
</div>
<div id="searchbar"><input class="text" onfocus="this.value=''" type="text" name="searchbar" value="Leita.."></div>
</div><!-- end .header -->
Here is the rest of the HTML if you prefer to see to all :
http://pastebin.com/8AyENrdn
It's hard to tell from what you have described and no CSS - Try this
#header {overflow:hidden;background:#eee;}
Related
I'm using Bulma. Consider the following HTML
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Now, the title is centered but the buttons aren't. Of course, if we set display: block; to the div which groups together the buttons, they get centered as well. But I couldn't find any example and I'm not sure if that's the way to go here.
Is there a more "Bulma-like" way of solving this problem?
I'm not sure about that.
I tried to reproduce the issue but it seems that the buttons are centered.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet"/>
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Maybe there are other rules that overrides this behavior?
EDIT:
It seems that in the same version between 0.4.0 and 0.8.0 they take advantage of the flex box layout.
In the example that you shared the buttons class has the display: flex-box but it miss the property justify-content: center; for centering the content of that div.
I don't know if it is the expected behavior or a bug.
Here a working example: https://jsfiddle.net/gix_lg/73vmofqa/1/
Have you tried " is-vcentered" instead of "has-text-centered" ?
Also, you can use empty columns by using a div with a class="column" to create horizontal space around .column elements, or use .is-centered on the parent .columns element
Have you tried to inspect your page to see the css?
I'm trying to create a partial view for my home work and I have approximately done that, but there is one issue that is annoying me: Overflow-Y is not working in any case. I tried to set the height of my DIV tag in % and also in PX but in both cases it doesn't work.
I want to add the scroll option when content overflows the height of the nested DIV tag.
<div id="MainDIV" style="height:100%;width:100%;">
<div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div>
<div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div>
<div id="Content" style="width:80%;height:70%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;overflow-y:auto">#RenderBody()</div>
<div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div>
</div>
But this is not working at all, I even tried to set the height in PX. The height of DIV increase as content is added to the body.
table-cell don't seems to support overflow, so you need to add a child and set its height ( and set its overflow-y ).
<div id="MainDIV" style="height:100%;width:100%;">
<div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div>
<div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div>
<div id="Content" style="width:80%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;">
<div style="height:200px;overflow-y:auto;">#RenderBody() -> "xxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxx"</div>
</div>
<div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div>
</div>
I will first say that I am learning CSS right now, and I am using coffeecup RLMP as software.
I am trying to give a row a image background property but what I am doing is not working at all, if anyone could help I would very much appreciate it, thank you.
code as follows..
<div class="row image-here">
<div class="coffee-span-12"></div>
</div>
<div class="row">
<div class="coffee-span-6"></div>
<div class="coffee-span-4"></div>
<div class="coffee-span-2"></div>
</div>
css now..
body > .row.image-here {
background-image:url('');
}
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
We've just started to redesign our site following the responsive web design + mobile first philosophy and guidelines.
In a particular page, we are facing the following situation: in the "mobile view" of the page we want to have the elements arranged as the left part of the image shows.
That's why in the HTML these elements are declared as follows:
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>
Up to this point, all of it is straightforward. The problem is that, using media queries, for higher screen resolutions we want to rearrange the items as shown in the right part of the image.
The general question, which solves our particular problem with this page, is: is it possible to float arbitrary elements to each of the two columns without having to change the HTML markup between the two versions? A pure CSS solution would be much desired.
Note: the height of the elements is unknown, and the width is percentual.
EDIT: For clarification, and regarding our particular case, we need the item E to be attached under item B, and not vertically aligned to D. This fiddle shows what we don't want.
You could float A, C and D to the right. However you might need to apply overflow:auto to B and E. Also note, that if B is higher than A, C is getting pushed down to align accordingly.
Fiddle
Could you do something like this?
<div id="container">
<div id="A">A</div>
<div id="B" class = "left">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>
You can just set float:left in the media query you want and ignore it in the other one.
Edit:
In response to OP's feedback that B and D were not sitting directly on top of each other, revising the code to float: right instead fixes this. ie
<div id="container">
<div id="A" class = "right">A</div>
<div id="B" >B</div>
<div id="C" class = "right">C</div>
<div id="D" class = "right">D</div>
<div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>
For the normal layout, you should do it like this.
Both divs should be left floated.
<div id="container1">
<div id="left">
<div id="B">B</div>
<div id="E">E</div>
</div>
<div id="right">
<div id="A">A</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
</div>
The problem is that the mobile version uses another arrangement.
So one solution is to make onther version for the mobile page and hide #container1 (and vice versa for the other site).
<div id="container2">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>