I am facing a problem with fixed position. I have two rows on top of each other and I want them to look like this:
which is what I want. Now because I need to use position fixed in my project to have the second row docked I changed the position to fixed. here is my css file:
.header {
font-weight: bold;
background-color: #4070CB;
color: #EFF0F2;
height: 5vw;
padding-top: 15px;
}
.story-board-header {
font-weight: bold;
background-color: #072e77;
color: #EFF0F2;
height: 3vw;
padding-top: 15px;
position:fixed;
}
Now here is what I get :
As you see the second div does not fill all its container.
Also here is my jsfiddle:
jsfiddle
Can anyone help?
Just use width: 100%.
* {
margin: 0;
padding: 0;
}
.header {
font-weight: bold;
background-color: #4070CB;
color: #EFF0F2;
height: 5vw;
padding-top: 15px;
}
.story-board-header {
font-weight: bold;
background-color: #072e77;
color: #EFF0F2;
height: 3vw;
padding-top: 15px;
position: fixed;
width: 100%;
}
<div class="container-fluid">
<div class="row header">
<div class="col-xs-12">
</div>
</div>
<div class="row" style="position:relative;">
<div class="col-xs-12 story-board-header">
eweweweewew
</div>
</div>
</div>
You forgot to link bootstrap.css to project:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
https://jsfiddle.net/pb7vptm8/1/
I am not 100% sure of what you are trying to accomplish.
Position fixed makes the element relative to the browser window and not it's container (source).
You can use both width: 100% or left: 0; right: 0; to make the element as width as the whole screen.
Fixed also causes the element to stay in place when you scroll the page. Is that what you want?
Related
Updated!!!
I've still facing the same error each time I view the page on landscape screen devices.
CSS:
f5 {
text-transform: uppercase;
color: #fff;
font-size: 30px;
font-weight: bold;
}
about.us
<div class="containerpreview">
<br>
<f5>Check out our products</f5>
<br>
<f6>and Experience no-frills delivery</f6>
<div style="margin-top:40px">
<div class="buttoneshop">Eshop</div>
</div>
</div>
is there a way to make the spacing in between closer? When I command out
text-transform: uppercase;
the spacing is fine.
Aside of that, is there a way to make an image inside src under href to be centered?
css
.images_1_of_4 img {
max-width: 100%;
<!-- height: 200px; -->
width: 200px;
align: middle;
}
.img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.grid_preview {
height: 200px;
}
shop.php
<div class="grid_1_of_4 images_1_of_4">
<div class="grid_preview">
<img src="..." alt="">
</div>
</div>
Try to change alignment text-align : justify; to text-align : left.
Or, if this is not what you like to do, letter-spacing is a CSS attibute to change space between charagcters, and word-spacing to change space between words
As other users suggested, consider forcing alignment on the left using text-align : left, you probably have text-align : justify; on a wrapper element or setted in another part of your css as depicted the example below.
https://jsfiddle.net/s5p9872t/
.f5 {
text-align : justify;
width: 250px;
}
.f5 {
text-transform: uppercase;
font-size: 30px;
font-weight: bold;
text-align: left;
}
Whenever I add a heading to the second div in my header, it move down. I've seen several answers to this problem, but none have worked so far, so this is either different, or I'm doing it wrong.
This is my header
<div id='header' class='full'>
<div id='headerhead' class='full'></div>
<div id='headertext' class='full'><h1>Protocol Grean</h1></div>
<div id='headerbuttons'></div>
</div>
This is the CSS for the four divs
#header {
height: 200px;
background-color: green;
}
#headerhead {
height: 50px;
background-color: darkgreen;
}
#headertext {
padding-left: 50px;
height: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
text-transform: uppercase;
background-color: pink;
}
#headerbuttons {
height: 50px;
background-color: blue;
}
What do I need to add to make the HeaderText not float down? Vertical align doesn't seem to do anything for me, and position absolute just make the HeaderButtons go away.
You need to remove the margin from your h1 element:
#headertext h1 {
margin: 0;
}
When I reduce screen size after running the code below, the image phone.png and all the text jump out of position. How can I stop this from happening.
css:
<style type="text/css">
#wrapperlp {
width: 100%;
height:700px;
margin-left:13%;
margin-top:5%;
background-image:url(https://***/blackbg.png);
background-repeat:no-repeat;
opacity:1;
}
#designbg {
background-repeat:no-repeat;
margin-left: 5%;
padding-top: 3%;
}
styling for text
#ad_head {
color: #f2852d;
font-weight: bold;
margin-left: 28%;
margin-top: -21.5%;
font-size: 21px;
}
#ad_message {
margin-left: 28%;
font-size:10px;
color:white;
font-weight:normal;
}
style for phone.png image:
#ad_logo {
height: 500px;
margin-left: 2%;
margin-top: -42%;
}
#logobtm {
margin-left: 2%;
margin-top: -42%;
}
</style>
Html:
<div id="wrapperlp">
<div id="designbg"><img src="https://*****/image.png" />
<div id="ad_logo"><img src="https://****phone.png" /></div>
<div>
<div id="ad_head">Text1<br />Text...</div>
<div id="ad_message">Text2</div>
<div id="logobtm"><img src="**.png" /></div>
</div>
</div>
</div>
You are using margin-top in percentages. However, percentages for margins are measured relatively to the window width, not the window height!
See http://www.w3.org/TR/CSS2/box.html#value-def-margin-width
Solution: use another unit to express the margin of the elements in, or use another way to position them on the screen (for instance top:5% in combination with position:absolute).
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
This question already has answers here:
How to arrange many <div> elements side by side with no wrap [duplicate]
(3 answers)
Closed 8 years ago.
Here is my code:
<div class="large-6 columns">
<div id='box1'>
<div id='text1'>
Name
</div>
<div id='text3'>
LastName
</div>
</div>
</div>
CSS looks like this:
#box1 {
float: left;
height: 125px;
margin-top: 30px;
margin-bottom: 30px;
clear: none;
width: 125px;
border-top-left-radius: 95px;
border-top-right-radius: 95px;
border-bottom-right-radius: 95px;
border-bottom-left-radius: 95px;
background-color: rgb(232, 68, 58);
position:relative;
overflow:visible;
}
#text1 {
float: left;
font-size: 1em;
color: rgb(255, 255, 255);
width: 28%;
height: auto;
text-align: right;
font-weight: 400;
line-height: 1em;
word-wrap: break-word;
margin-left: 69.6%;
margin-top: 53px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: snippet;
overflow:auto;
}
#text3 {
float: left;
font-size: 1em;
color: rgb(0, 0, 0);
width: 72%;
height: auto;
text-align: right;
font-weight: 400;
line-height: 1em;
margin-left: 125px;
margin-top: 0px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: snippet;
position:relative;
overflow:visible;
}
Now this is not giving me the required result.
The Text-3 should actually appear next to the text-1. But somehow its wrapping down to the next tine.
btw. I am using this inside a Zurb Foundation code. Writing my custom class on top of the existing CSS styles.
EDIT:
Although I solved the problem, just for the clarity of some of you, Text-1 is inside the circle and is right aligned to the edge of the circle. Text-3 is outside the circle and is left aligned to the edge of the circle. Such that the two text, are next to each other, one inside the circle and one outside.
Is there a reason you are adding the margin-left to each div? Cleaned it up a little and it seems to work.
#text1 {
min-width: 0.5em;
width: 28%;
color: white;
}
#text3 {
min-width: 0.5em;
width: 72%;
color: black;
}
.inner-box {
float: left;
margin-top: 53px;
text-align: right;
font-weight: 400;
font-size: 1em;
line-height: 1em;
}
http://jsfiddle.net/ferne97/8FzN5/1/
Also think about creating a re-usable class for all that code that is getting repeated in each inner div.
http://jsfiddle.net/tahdhaze09/7FM82/
CSS:
#box1
{
width:980px;
float:left;
}
#text1{
width:450px;
float:left;
background-color:#45e64c;
}
#text3{
width:400px;
float:left;
background-color:#edc321;
}
HTML:
<div class="large-6 columns">
<div id='box1'>
<div id='text1'>
Name
</div>
<div id='text3'>
LastName
</div>
</div>
</div>
Text boxes, side by side. I left out the other CSS for simplicity.
Here's how to do this with Foundation's native architecture:
<div class="large-6 columns">
<p>Some content</p>
</div>
<div class="large-6 columns">
<p>Some more content</p>
</div>
This will give you two containers, side-by-side, spanning the full width of 960px.
I tried out the code on W3C school's
try it editor.
Your question does not really describe what you were expecting to see. Of course the "Name" and "Last name" beside each other. But within the circle? to left of it ?
I would recommend trying out the css on W3C's try it editor and playing around with the margins (margin-top, margin-left) and widths. Suggest starting by removing the margins and widths completely from the above css and then adding them one at a time. Of course check the try it editor for the changes due to each of the margin / width additions.