Every section is overlapping to the 'home-screen' section. Here's the live link Hello Sylhet.
But the page should be like this
The problem is incorrect use of position:absolute property on section#home-screen. This section is being overridden by the elements coming after it. You need to push the elements further down using either margin-top or an empty div, so that #home-screen is visible.
Try this CSS:
#icon-search {
margin-top:60%;
}
Try to modify the value of this property and the height of section#home-screen to get the display that you are seeking.
NB 1: As #Obsidian Age correctly mentioned in the comment, if you replicated your problem using JS Fiddle, Codepen or such, you would have got a precise answer with the code much quickly.
NB 2: If you want a piece of advice, don't position #home-screen as absolute. position:absolute is tricky, especially if it is not within a position:relative block element. Try to avoid it unless you absolutely (pun intended) need to use it. Make the #home-screen a flexbox and then, push the next section up with a negative margin. Run the below snippet to see an example.
.home-screen,
.icon-search {
display:flex;
align-items:center;
justify-content:center;
}
.home-screen {
border:1px solid red;
height:60vh;
}
.icon-search {
background-color:#fff;
justify-content:space-around;
margin: -25px auto 0;
height:50px;
width:90%;
border:1px solid blue;
border-radius: 25px;
}
<div class="home-screen">
<div class="searchbox">Search me <input type="text"></div>
</div>
<div class="icon-search">
<div class="icons">icon1 icon2 icon3</div>
</div>
Related
I have problem with flexbox. Whenever I put some tag inside the format (visible output) is wrong.
HTML:
<div class="container">
<div class="line1"><div class="one">IMG</div></div>
<div class="line2">Some text here.</div>
<div class="line3">Cause of A tag [Cause of A tag] <br><a> (this is inside A tag) [(this is inside A tag)] </a><br> flexbox is displayed wrong [flexbox is displayed wrong]</div>
</div>
CSS:
.container
{background:black;
padding:10px;
display:flex;}
.line1
{border:2px solid blue;
padding:10px;
background:yellow;}
.line2
{display:flex;
align-items:center;
align-self:stretch;
border:3px solid blue;
padding:10px;
background:yellow;}
.line3
{display:flex;
align-items:center;
align-self:stretch;
border:3px solid blue;
padding:10px;
background:yellow;}
.one
{padding:10px;
background:red;}
What I want to do is to align-items:center; at .line3 but I need to set up display:flex; to do so. But the the format is gone... and has some space around.
https://jsfiddle.net/4025gLo8/4/ - wih flex (item are centered but there is problem)
https://jsfiddle.net/b8amyfog/4/ - without flex (proper format, but without align-items:center; or align-self:stretch; etc.)
If I am understanding your question correctly, you want everything from the second fiddle + the content in line 3 to align to the center of the container. If that is what you want, I think this fiddle might solve your problem: https://jsfiddle.net/mk3xh1fe/
^ Let me know if that is what you were looking for.
The issue was that, since you're using display: flex on the div, and there are several elements within that div, they need to be told to align as a column rather than a row (which is the default).
Also, I enforced some code styling rules here to your css to follow standards and that, in my opinion, make the css more readable.
Hope this helps!
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I have a outer container, containing two links. They are aligning horizontally. The first one contains a div with background image and the second one is just text. The problem is the whole outer container acts as the first anchor, links to the first url while it is supposed to link nothing. Here's the simplified layout
<div id="links-block">
<div id="edit-quote-button"></div>
Preview the PDF
</div>
Here is the example JSFiddle. I am just wonder how to structure this set of elements, to prevent this problem.
Define this css
a{display:inline-block;vertical-align: top;}
#preview-pdf-link {
float: right;
margin-top: -30px; // remove this line
color: #999999;
}
Demo
here is your new html structure
<div id="links-block">
<a class="g-link" href="http://www.google.com"><div id="edit-quote-button"></div></a>
<a class="y-link" href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
<div class="clear"></div>
</div>
add this css to your css file
.g-link{
display:block;
float:left;
}
.y-link{
display:block;
}
.clear{
clear:both;
height:0px;
width:0px;
display:block;
}
hope this will work for you
It's not a great idea to have a div inside the a like that (invalid in pre-HTML5). If you set the edit-quote-button div to display: inline-block it will work better, though. Then remove the negative top margin on the Yahoo link.
div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:1px;
margin-top:5px;
margin-bottom:5px;
}
This is what I am doing now but the Margins seem to have no effect! I am not sure why but the text above and below this "horizontal rule" touch the horizontal rule with no margins. Is there a way to implement margins in this scenario?
http://jsfiddle.net/fwqSH/
Problem is your not closing the div:
You cannot close a div as you did there must be a closing tag as so:
<div></div>
and not
<div />
corrected jsfiddle:
http://jsfiddle.net/fwqSH/1/
EDIT
Final solution was to add a min-height of 1px because an empty div sometimes do weird things.
Final CSS:
div.horizontalRule {
min-height: 1px;
clear:both; width:100%;
border-bottom:1px solid #d1d1d1;
height:1px; padding-top:5px;
margin-top:5px;
margin-bottom:5px;
}
The reason the text below it butts right up against the line is because you didn't properly close the div. The browser sees <div /> and thinks that the paragraph after that is part of the div. So change your HTML to something like this:
<div class="horizontalRule" runat="server"></div>
If this is a horizontal rule, I recommend adding your class to the horizontal rule tag, <hr class="horizontalRule" /> This may help resolve some div interaction glitches.
I have been using the examples here to setup a webpage that has columns with equal heights (using only HTML and CSS), and it is working relatively well. Here is the complete HTML and CSS code that I am using.
Newbie questions:
(1) As you can see, I tried to make the left column (id="column_bottom") have a white (#f5f5f5) background with black text, and the right column (id="content_bottom") with black background with white (#f5f5f5) text, but one side is always overriding the other. What can I do to make it what I want?
(2) Also, you can see in the CSS that I have defined fonts and background colors for body, but somehow that is not carrying through, what should I do?
Thanks!
P.S. I am looking for a pure HTML/CSS solution, and prefer not to use javascript.
You're close. In your code, just change your styling to the columns themselves, like so:
#content_bottom {
color: #f5f5f5;
background:#000000; /* right column background colour */
}
#column_bottom {
color: #000000;
background:#f5f5f5; /* left column background colour */
}
the code below will create two boxes side-by-side and the container will always wrap those boxes, no matter how tall they are. this should solve your issue of having columns of the same height.
html:
<div class="container">
<div class="box">blah</div>
<div class="box">blah<br/><br/>blah</div>
<div class="clear"></div>
</div>
css:
.container { position:relative; width:100px; border:1px solid red; }
.box { position:relative; float:left; width:40px; border:1px solid blue; }
.clear { clear:both }