I'm trying to accomplish the following where I have some text on the left side of the page and an graphic on the right hand side.
https://i.stack.imgur.com/K5jAy.png
I'm using Bootstrap 4 and everything has been going well so far. However, when trying to incorporate the graphic into the site, I am running into two problems:
I always want the graphic to be positioned the same way no matter what screen size the website is being displayed on. Currently I am setting the graphic's width to 75%. When I preview on a smaller screen, the graphic is not even visible because the width is so small in regards to the width of the viewport. I am using absolute positioning, but this seems to change depending on the screen size.
When previewed on a larger monitor, the graphic displays on-top of my text. Now, I didn't think this would be a problem. I've saved my graphic as a png to allow for transparency and I've given my graphic a higher z-index than my text elements. However, the graphic seems to be like a block and covering my text elements, as seen here.
https://i.stack.imgur.com/wk5QX.png
Do you have any suggestions on how to fix either issue?
HTML:
<section class="header">
<div class="container-fluid p-4">
<img class="logo" width="52" height="57" src="img/BraydonCoyerLogoIcon.png" alt="Personal Logo">
<img src="img/decoration1.png" alt="Colorful Decorations" class="decoration">
</div>
<div class="container mt-5">
<div class="greeting">
<div>
<h1>Hi,</h1>
<h1>Some <span class="highlight">Text</span></h1>
<hr align="left"/>
</div>
</div>
</div>
CSS:
* {
background-color: #262628;
color: #eaeaea;
font-family: "Varela Round", Helvetica, Arial;
}
.greeting {
margin-top: 10em;
}
.greeting h1 {
font-size: 100px;
}
.highlight {
color: #f99e46;
}
.slogan {
font-size: 20px;
}
hr {
background-color: white;
width: 50%;
}
.decoration {
width: 75%;
position: absolute;
z-index: initial;
top: -150px;
left: 520px;
}
Try to use percentage for left position: left: 50%
Looks like your decoration image inherits background-color: #262628; from wildcard selector
Related
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
I'm having a problem with a fixed border around a responsively sized div. This issue only happens in Chrome.
I'm having a hard time reproducing it in JSFiddle, but I'm essentially trying to center a div within another (which is placed somewhere on my page) and the centered-div has a nice 1px border around it. The LESS for these two elements are as follows:
.popup {
display: inline-block;
height: 93%; width: 30%;
margin-right: 7%;
margin-left: -3%;
position: relative;
.text {
box-sizing: border-box;
width: 100%; height: 50%;
border: 1px solid black;
padding: 0 5%;
position: absolute;
top: 50%; left: 50%;
.translate(-50%, -50%); # Some LESS that is just a translate call
color: black;
font-size: 18px;
}
}
This is what I see, which changes as the screen size changes (sometimes correct, sometimes different borders are missing/incorrect):
EDIT: Added relevant HTML.
<div class="container">
...Other stuff...
<div class="content">
...Other stuff...
<div class="breakdown">
<div class="block">C++ (Circle dials you see)</div>
<div class="popup">
<div class="text">Some text here to go in the popup</div>
</div>
<div class="block">Java (Next dial)</div>
<div class="popup">
<div class="text">Some text here to go in the popup for the Java dial</div>
</div>
</div>
</div>
</div>
There's more stuff in container, and more stuff in content in the DOM levels shown. However, the other items in container are each in their own block on the page (no overlap), and so is the items in content. A breakdown div holds the dials and popups that you can see in the screenshots. The idea is that when i hover over a "block" or a dial the popup shows up to the right, shoving the next dial over when shown.
I've observed such issues with borders when I have zoomed the page - that would explain why you see it only in Chrome and only on one domain (you said you cannot reproduce it in JSFiddle).
Click Ctrl+0 or check if you have an icon in the addressbar of a magnifying glass (it's displayed when the zoom level is different from 100%).
I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3
box - the popped out div with lightbox effect
address_box - the div inside the box which is nothing but an outline image
address - i want this div to be imposed upon the address_box image
HTML:
<div class="box">
<div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div>
<div id="address_box"><img src="img/address-box.png" />
<div id="address">The address text
</div>
</div>
CSS:
.box
{
position:absolute;
top:20%;
left:12%;
text-align:center;
width:940px;
height:321px;
background:#F9E5B9;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:none;
}
.box #move_in_img{
float:left;
margin-left:20px;
margin-top:50px;
}
#address_box{
position:relative;
}
#address{
position:absolute;
}
the "box" properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.
What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??
Here is the paste bin link http://jsbin.com/anehey/1/edit
Just picked a sample image from net for the frame. I want the text to go inside the frame..
Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text div
HTML
<div class="container">
<img src="#" />
<div class="text"></div>
</div>
CSS
.container {
position: relative;
/*Set Height Width Accordingly*/
}
.text {
position: absolute;
bottom: 0;
height: /*Whatever*/;
width: 100%;
}
Demo (Not related to my answer but I fixed what he was asking for)
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.
<div class="signup">
<div>Tenxian アカウントに必要な情報</div><br/>
</div>
<br/><br/><br/><br/><br/><br/>
<div align="center">#2009 Tenxian 利用規約
</div><br/>
<div align="center">Tenxian·English 腾闲·中国</div><br/><br/>
The code of .signup is:
.signup {
border: 1px solid #99CCFF;
position: absolute;
width: 700px;
height:450px;
left: 50px;
right: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
The problem is that
#2009 Tenxian 利用規約
Tenxian·English 腾闲·中国
is displayed in the box of <div class="signup"></div>, how to display it out of the box of <div class="signup"></div>?
I want to display
#2009 Tenxian 利用規約
Tenxian·English 腾闲·中国
at the bottom of a web page and outside of the box of <div class="signup"></div> . How to do it?
<div style="position:relative"><div align="center" >#2009 Tenxian 利用規約
</div><br/>
<div align="center">Tenxian·English 腾闲·中国</div><br/><br/>
</div>
does not work.
The problem is that your signup box is set to position:absolute. When you do this, the element is removed from the flow of the page.
The easiest solution is to simply not make it position:absolute. (If this is not possible, please revise your question so that more helpful answers can be posted.)
Your original code, simplified
<div class="signup">
<div>Tenxian アカウントに必要な情報</div>
</div>
<div class="footer">#2009 Tenxian 利用規約</div>
<div class="footer">Tenxian·English 腾闲·中国</div>
.footer {
text-align: center;
}
Note that my solution below does NOT require you to use this code. It works fine with your existing HTML markup. I'm posting this code so that future readers will be able to understand the markup more easily.
A possible solution
.signup {
border: 1px solid #99CCFF;
width: 700px;
height: 450px;
margin-left: 50px;
margin-right: auto;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
}
This makes your signup box take up the proper amount of space in the flow of the page. Here are the changes:
Remove position:absolute: This causes the signup box to display as a regular statically positioned box
Change left and right to margin instead: When a block-level box is displayed statically, it does is not affected by top, left, and so on. Instead, we use margins to push the box over to where we want it to be.
{overflow:visible;} might work