I want to make the green button at the bottom of the nav area on this page full width (across the whole page, with the text centered).
I've tried adding width:100% to 3 of the divs which I though were relevant, but no joy. I've also tried quite a few other tricks. I can only use css as the whole modal poop-up is handled by a WordPress plugin which I don't want to tamper with.
Any help much appreciated.
Try to move your element <div class="banner-button"> out of the current hierarchy and place after element <div class="col-md-8 desktop-only" in side element <div class="row">
since it is inside nav nothing works with width
if you want to work with same hierarchy please use css : position properties
Do you want something like that
If yes then you have to made some changes into your html like
<nav >
<ul>
<div class="banner-button">
<div class="md-trigger md-setperspective btn-bg-2160 btn btn-lg text-center">
Css must be
.md-trigger.md-setperspective.btn-bg-2160.btn.btn-lg.text-center {
width: 100%;
}
.banner-button {
display: block;
position: fixed;
left: 0px;
width: 100%;
z-index: 91;
text-align: center;
top: 72px;
}
Best way to do this take out your button from <div class="col-md-8 desktop-only"> then add <div class="col-md-12"> and wrap your button inside this.
Related
I have started to try to build a really easy website and trying to make it responsive. Something in the style of http://www.squarespace.com/ (Split up in different sections with different backgrounds etc that you just scroll throu) But i have a problem that I really cant figure out right now, I don't know how to make the foundation for this kind of site. I got the "menu" part quite nice, but as soon as I try to but some content on the first "part" or try to start the second part I run into trouble.
To try to explain I have two < p > that I tried to put on-top of the first part, and below to make the second part. I guess the explanation is not perfect, but hopefully the code can clear up my issue abit :)
Edit: Just took some random pictures to be able to show...
#logo img{
z-index: 10;
left: 4%;
top:20px;
max-width: 50%;
height: auto !important;
position: absolute;
}
#signup img{
z-index: 10;
right: 4%;
top:20px;
max-width: 50%;
height: auto !important;
position: absolute;
}
#main-container img {
width: 100%;
height: 100%;
max-height:308px !important;
position: absolute;
top: 0;
left: 0;
margin:0;
}
#second-container {
}
<div class="container">
<div id="menu">
<div id="logo">
<a href="example.com">
<img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
</a>
</div>
<div id="signup">
<a href="example.com">
<img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
</a>
</div>
</div>
<div id="content">
<div id="main-container">
<img src="http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png" alt="" />
</div>
<p>Ontop of background</p>
<div id="second-container">
<p>Under background</p>
</div>
</div>
</div>
https://jsfiddle.net/gt2d6aa7/
Since the image in main-container is not set as a background image and it comes before the paragraphs in the source code, it is appearing on top of the paragraphs.
2 things you could do to get the paragraphs to show:
1) Set a position property on the paragraph style to make it appear on top of the image:
div.container p{position:relative;}
2) I would suggest setting that image as the background of your container and giving it a minimum height (in case your content does not increase the container size enough to fully see your image). Like so:
<div id="main-container" style="background-image:url('http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png');background-size:100%;min-height:300px;background-repeat:no-repeat;">
Then, make sure to close your main-container before opening the second-container, that way it creates a clean section for different content. The way you have it, second-container is inside the main-container and any content that you wanted to appear below the main background and top content would actually just appear on top of the main-container background.
The Squarespace site you linked to is a good example visually, but if you inspect their code it gets a little confusing for a beginner, since they are nesting the bottom sections (below that video presentation) in a section within in a div.
Twitter Bootstrap has some good examples of one-page layouts with cleaner markup to follow. This is a good example: http://blackrockdigital.github.io/startbootstrap-landing-page/
Here are their other examples: http://startbootstrap.com/template-categories/one-page/
I am not an advocate of Bootstrap, since it adds a lot of unnecessary bloat in most cases, but these give a good indication of how to structure your page.
Good luck!
I have a div which contains other divs and several CSS classes applied to it.
Now, it seems like everything works only on the text part of my div, where there is no text, nono of the events nor css works.
All Jquery events and CSS properties works only on text contained in the div and not on the whole div.
Even if I just try to apply a cursor: pointer; in the css for that div or even attach an event handler like this:
$("#myDiv").on("click", function (event) {
alert("works");
});
I tried setting a background-color, setting a background-image, I tried click event and on event. Nothing works.
HTML
<div id="content">
<div id="meatBlock" class="blocks">
PORK & BEEF
</div>
<div id="cheeseBlock" class="blocks">
CHEESE & ONIONS
</div>
</div>
CSS
Here is the CSS on one of the internal Divs that don't work:
.blocks
{
float: left;
width: 310px;
height: 141px;
}
#content
{
max-width: 975px;
min-width: 975px;
margin: 0 auto;
width: 50%;
}
If I remove the float:left from the css altogether, it works. I can't understand why because I can't reproduce it in jsfiddle.
Anybody as any suggestions and knows what is going on here?
I need it to work only in IE8+, so no worries about chrome or firefox.
I found the problem.
It was float:left indeed.
To fix this issue I put a <div style="clear: both"> at the end of all the divs that use the float and that magically change the behaviour of the divs back to normal
The links are going out of the navigation bar, because it is too tall (I think), and I want the items to go aside from eachother.
#navbar {
height: 21px;
width: 100%;
top: 200px;
text-align: center;
font-size: 20px;
}
Oh and here's the HTML:
<div id="navbar">
{block:AskEnabled}
<div class="navitem">{AskLabel}</div class>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<div class="navitem">{SubmitLabel}</div class>
{/block:SubmissionsEnabled}
<div class="navitem">{text:Link 1}</div class><div class="navitem">{text:Link 2}</div class><div class="navitem">{text:Link 3}</div class>
</div id="navbar">
Ignore the stuff in brackets like AskLabel, and the div class navitem, I got rid of it :P
Because your links are in divs, which are block elements, there is a page break between each div. You need to use something like a span or set display: inline on your navitem div elements.
See example: http://jsfiddle.net/7dPkQ/3/
Edit for clarification: spans by default have display: inline set. divs by default have display: block set. In your example, the links will go side by side if they are wrapped in an inline element. See also http://www.w3schools.com/cssref/pr_class_display.asp
I'm trying to display on one line:
a H1 element aligned to the left of the containing box
several "buttons" (A elements here) aligned to the right of the containing box
all being on the same baseline
Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.
<div id="block1">
<h1>What a great title</h1>
This link can kill you
Click if you dare
</div>
The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically):
http://jsfiddle.net/GlauberRocha/bUsvX/
Any idea?
I did this to my site a quite ago: a h2 on the left, and a button on the right. Screen shot:
Code:
<div id="side_bar" class="clearfix">
<h2 style="float: left;">Charity Map</h2>
<button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
You have a potential problem with that layout - what if your H1 is too long and so are the buttons? They will run in to each other. Because of this, no simple CSS will do - CSS doesn't do magic like that - it would have to imply some sort of solution to the above problem.
However, what you want can simply be accomplished using absolute positioning:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right">
This link can kill you
Click if you dare
</div>
</div>
If you are really afraid that the header and the anchor container might run in to each other depending on generated content, you can use CSS max-width and overflow properties to restrict their containing boxes to some sensible values. The overflowing content will be hidden but at least the layout will not break visually. I assume the following modification of the above code (pardon the duplicate) would serve the purpose:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
This link can kill you
Click if you dare
</div>
</div>
To round off, you cannot achieve this using a straightforward CSS property combination, because with CSS (and HTML), content flows from left to right and top to bottom, or it becomes absolutely- or fixed- positioned which interrupts the flow. Anyhow, it does not want to remain on the same line, and you as the layout designer are left with resolving ambiguities such layout would introduce, such as what to do when the two trains running from each direction front-collide with each other :-)
It's hard to achieve without any wrapping elements or fixed values...
Adding a fixed line-height to both the Heading and the Links would solve your problem rather quick.
Align your Links with 'display:block; float:right' to the right.
Now Set "line-height: 40px;" to both the heading and the links
Should work, but only when the size of the heading doesn't change....
One potential approach to this, depending on your exact needs, is to use a table layout:
#block3 {
display: table;
width: 100%;
box-sizing: border-box;
}
#block3 > * {
display: table-cell;
}
#block3 > *:last-child {
text-align: right;
}
JSFiddle: http://jsfiddle.net/bUsvX/39/
If you want the buttons strictly aligned right, I think this solution requires another element to wrap them:
JSFiddle: http://jsfiddle.net/bUsvX/40/
I had the same issue.. Add display:inline to the h1, then for buttons: float:right; display:inline;
example (with use of Twitter Bootstrap):
<h2 style="display:inline">Users</h2>
<i class="icon-download-alt"></i>XLS
<form style="display:inline; float:right;">
<input type="text" class="input-medium search-query" name="search">
<button class="btn" type="submit">Search</button>
</form>
Hey guys, I'm having some trouble with my css position. Basically I have a sidebar that is set to the left of the screen, which basically includes all my links for navigation. I want the sidebar to extend all the way to the bottom of the screen, no matter if the user minimizes or maximizes the browser, or their resolution. Even if the page happens to scroll I want the div to go all the way to the bottom. I'm having a lot of trouble with this and cannot get it to work correctly. Here is my code, if anyone spots the reason it is not working, any help is greatly appreciated.
HTML:
<div id="welcome">
Welcome <br> to My Site!<br>
<span style="color: red; ">(Beta)</span>
<div id="sidebar">Home</div>
<div id="sidebar">link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Forum</div>
<div id="sidebar">About</div>
<div id ="sidebar">Requests</div>
<div id="sidebar" >"Pr0j3ct Un1ty"</div>
<div style="font-size: 20px;">Logged in as: <?php echo $_SESSION['username']; ?> </div>
<div id = "sidebar" >
Logout </div>
<div style=" font-size: 16px;">Account Settings</div>
<div style="margin-left: 10px; position: absolute; bottom: 0px; font-size: 16px;"><b>© jm1llz 2010</b></div>
</div>
CSS Page:
#welcome
{
width: 15%;
float: left;
background-color: darkgrey;
height: 100%;
text-align: center;
font-size: 24px;
font-family: Comic Sans MS;
font-weight: bold;
}
The best way is to use a background image. If you are not using a body background image now then the easiest is to create and image with the width of the sidebar.
body {
background-image: url(/images/bg.jpg); /* Wherever your image is located */
background-repeat: repeat-y;
}
That will make the image go all the way to the bottom regardless of how tall your sidebar actually is.
Then on your sidebar, just style the div to fit within the image you created. If it's all the way to the left like you say then all you should need to add to your style is the correct width and maybe some padding.
If you are using a body background image than create another div with...
div { width: 100%; height: 100%; } /* You may need a float: left; as well */
...and place the above background CSS inside the new div. You will then have to add that new div just inside the tag in your HTML.
easiest practical way is to throw a bg image on your element that contains your floating sidebar with the bg color/graphic that repeats vertically. make sure the container has overflow/clearfix.
I think you are asking "how do I make two columns the same height?"
If that is the question, there are various 'tricks' to do it via CSS (such as meder's recommendation) but these days I'd strongly suggest just using javaScript. It's fairly trivial especially if you are using something like jQuery.
ON document ready, grab the height of each div and then force the shorter one to a height equal to the taller one.