I have a 2 Side-Cover which has an image side an Title Side.
And i want to make the Title Side move over Image Side when screen Resizes!
something like this site Cover NKWindows
Thanks for Helping
You can use something like this. Place the cover as the container's background and then place the content inside the #title div. That way, when the screen gets smaller, the background will remain untouched and the right-hand content will seem to move over it.
#cover {
background-image: url(http://www.nkwindows.co.nz/assets/HomeSlides/nk-windows-02.jpg);
background-repeat: no-repeat;
width: 100%;
overflow: auto;
position: relative;
height: 180px;
}
#title {
float: right;
font-size: 40px;
padding: 10px;
margin: 0;
width: 250px;
background-color: #E2231A;
color: #fff;
height: 180px;
box-sizing: border-box;
}
<div id="cover">
<div id="title">This is the
<br />moving title</div>
</div>
Related
I'm trying to give background color to the icon present in the right hand side of the page. But background color is applied only for the image as a block. But actually what I need is background should start from the right side of the page and should end at the left side of the page. So I set the min-inline-size as 100%. This resolved the background issue. Now the image is in the left hand side. But I'm not getting how to achieve this?
<img src="excelpng.jpg" style="height: 25px; overflow: hidden; background-color: darkred; display: inline-block; min-inline-size: 100%" alt="">
Apply width: 100%; text-align: right; to img
img {
position: fixed;
margin: 1px;
right: 0px;
display: inline-block;
min-inline-size: 100%;
height:25px;
overflow: hidden;
background-color: darkred;
width: 100%;
text-align: right;
}
<img src="excelpng.jpg">
Hope this helps:)
This page http://alsotoday.com/roemerstrasse/ has a fixed bootstrap navbar, which should stay fixed, so the video in the background can shine through it. When scrolling the content all the way up, it will go beneath the navbar, which is not favourable. Anybody know, how to create an upper margin for the content, so it will scroll only just beneath the navbar without changing the navbar to not-fixed?
Edit 1:
main-area-video and panel_container (meanwhile called main-area) are both height 100%, because each, the video and the tiles should fill a screen.
Something like this ? In this snippet, the articles will not go behind the navbar, and only the content is scrollable. This is how SPA are supposed to work, for instance.
EDIT I added an opacity to the navbar so you can see, nothing is behind it.
body {
margin: 0;
height: 100%;
overflow: hidden;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
line-height: 50px;
font-weight: bold;
font-family: Helvetica;
font-size: 30px;
background: darkcyan;
width: 100%;
padding: 0 20px;
color: white;
opacity: 0.2;
}
.content {
margin-top: 50px;
background: #ddd;
height: calc(100vh - 50px);
overflow: auto;
padding: 12px;
box-sizing: border-box;
}
.article {
height: 200px;
width: 100%;
background: #ccc;
margin: 12px 0;
}
<div class="navbar">Navbar</div>
<div class="content">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
Since your page is always at 100% height and the only thing getting scrolled is the content you could just make it absolute instead of fixed.
But since you asked for a solution with a fixed position just add an margin to the content wrapper.
So to be clear: add margin-top: {MENU_HEIGHT}px to the content div, replacing {MENU_HEIGHT} with the actual height of your menu or the desired distance from it.
Here is an image that illustrates my goal:
http://imgur.com/80v5bRk
What would be the best way to achieve a style that looks like this? By this, I am asking, how can I set up rules so that the spacing and locations of the buttons are perfectly aligned in the center (they are not aligned correctly right now). I was thinking of a div that wraps the whole thing together, a div that floats left holding the first angle and the title, and a second div that floats left holding the icons. The icons are from the font-awesome package and I do not understand how to align them correctly.
Something along the lines of this should do:
HTML:
<div class="bar">
<div class="first button"></div>
<dic class="second button"></div>
</div>
CSS:
.bar{
width: 960px;
height: 60px;
margin: 0 auto 0 auto;
padding: 5px;
}
.button {
width: 50px;
height: 100%;
float: right;
margin-right: 10px;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center; /* This is what will centralize it vertically and horizontally */
}
.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }
I hope this helped.
Well, its hard to answer it exactly unless you post what you currently have.
However, your on the right track.
What I would do:
Wrap the whole thing in a div (as you said)
float the text left (which you said as well)
float the icons right (not left)
As far as spacing, put a margin/padding left/right to the two buttons.
EDIT:
As per my discussion with Luiz Berti:
You are almost right.
Try this instead:
http://jsfiddle.net/GYPK5/1/
HTML
<div class="bar">
<div class="text">Lots of stuff here</div>
<div class="buttons">
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
</div>
<div class="clear"> </div>
</div>
CSS
.bar {
width: 400px;
border: 1px solid black;
height: 20px;
font-size: 16px;
line-height: 20px;
}
.text {
margin-left: 20px;
float: left;
width: 200px;
}
.buttons {
float: right;
margin-right: 20px;
position: relative;
top: 2px;
}
.buttons img {
margin: 0 10px;
}
.clear {
clear: both;
width: 0;
height: 0;
}
I have two divs, both are floating left. "Left" div would be left column of the page. "Right" div would be the main content.
HTML:
<div id="wrapper">
<div id="content">
<div id="left">
</div>
<div id="right">
</div>
<div id="docked_div">
</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
margin-top: 35px;
width: 1005px;
}
#content {
overflow: hidden;
background-color: white;
}
#left {
float: left;
width: 250px;
background: red;
}
#right {
float: left;
background: blue;
}
This works fine. Now I have the third div named docked_div. This div should be outside the wrapper and on the right side of right div (about 20px from top of right div).
So, the black div now is on the left side, but it should be on the right side and outside the wrapper.
I have tried to set position to relative or absolute in different ways, but I cannot get
the result I want. I do not have much CSS knowledge on creating layout, so, I would appreciate any suggestions and guidance.
Here is the full example:
http://jsfiddle.net/TA7Rh/
I think this will work
#wrapper {
margin: 0 auto;
margin-top: 35px;
width: 1005px;
position: relative;
}
#docked_div {
/*background: url(../images/mazais_fons.png);*/
background-size: 100%;
width: 53px;
height: 212px;
position: absolute;
right:-60px;
}
jsFiddle Link
change the right position as per your requirement.
Try this.
#docked_div {
background-size: 100% auto;
height: 212px;
position: absolute;
right: 0;
width: 53px;
}
This will take the div to be on the right of the main div. Hope this helps.
I'm having trouble getting my layout working correctly, I have a main div and a sidebar div these are both float: left if the screen size is resized or if its viewed on screen smaller that what I have designed on (1920x1080) then the sidebar div drops below the main content.
I tried placing a wrapper around each div, but this has no effect.
<div id="header">
[Header]
</div>
<div id="content">
[Content]
</div>
<div id="sideBar">
[SideBar]
</div>
<div id="footer">
[Footer]
</div>
body
{
width: 100%;
color: #000000;
background-color: #000000;
margin: 0;
padding: 0;
}
#header
{
width: 100%;
height: 110px;
background-color: #336699;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#content
{
float: left;
margin-left: 50px;
width: 70%;
height: 700px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
margin-bottom: 40px;
}
#sideBar
{
float: left;
margin-left: 50px;
width: 15%;
height: 400px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
}
#footer
{
width: 100%;
height: 80px;
background-color: #174555;
margin: 0px;
padding: 0px;
color: #ffffff;
clear: both;
}
Basicly both div's should resize until a certain size is reached, then scrolling should be enabled. I'm pretty sure I have done something simple wrong but i'm not much of a design person.
Example can be shown here : Link
Thanks for any advice :)
Karpie's right.
Also why not simply start out with one main div, say measuring 1000px in width, then work within that? If you can't do that then choose a measurement type, like px, and stick with for the widths, padding and margins of those elements. At least that would make it easier to do your math and know how much space you do or don't have.
I generally stick to relative measurements, like pixels (I don't like absolutes, it's personal. :P).
EDIT
Ok, try this, add a wrapper around the entire page (just to test, so bear with me). Give that wrapper an id of like #main-body or something, and define a width. Set the widths of the content and sidebar. If you minimize the screen, the sidebar shouldn't fall below the content div. It wil go outside the view port, though.
/* Wrap all in #main-body with specified width */
#main-body{
width:1000px;
margin:0 auto;
}
/* give these elements a relative width */
#content
{
float: left;
margin-left: 50px;
width:600px;
height: 700px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
margin-bottom: 40px;
}
#sideBar
{
float: left;
width:100px;
margin-left: 50px;
height: 400px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
}
Sorry for the length of this. :P
You're mixing up percentages and pixels. 70% width + 30px padding + 50px margin (all on content) + 50px margin + 15% width + 30px padding (all on sidebar) can add up to more than 100%.