how to make this text to touch the right side of the screen....
I gave margin but its not moving to the right side.....
wanted my user nmae to be on the right extreme
http://jsfiddle.net/KthYy/embedded/result/
User info: test1#defie.co
<div class="companyLogo">
<a class="brand" href="http://intra.defie.co/%3C?=%20HOME_URL%20;?%3E" style="">
Company LOGO
</a>
<div class="nav-collapse collapse"></div><!--/.nav-collapse -->
</div>
<div class="login-container">
<span class="userInfo"><span class="mailId">User info: test1#defie.co</span><span>[LOG OUT]</span></span>
</div> <div class="clear"></div>
</div>
</div>
You have set in your CSS rules right padding of 133 pixels for your userInfo SPAN:
padding-right: 133px;
That's preventing it from displaying right-most. Remove that declaration or set it to 0. You might also want to set text-align property to 'right' for your login-container:
.login-container {text-align:right;}
That's what you were thinking of?
Cheers!
Related
<div class="container-fluid text-center" style="background-color:#1a242f;">
<div class="row">
<div class="col-sm-2">
</div>
<div class="imageheader col-sm-4">
<a href="index.php">
<img class="img-responsive" src="images/logo & name.jpg">
</a>
</div>
<div class="search col-sm-4" style="padding-left : 12%;">
<ul class="list-group" style="background-color: #6ABED8;">
<li>
<a href="careersatbvimit.php" style="color: white;">
Career's At BVIMIT
</a> |
</li>
<li>
<a href="studentlogin.php" style="color: white;">
Student Login
</a>
</li>
</ul>
<br><br><br><br>
<p class="socialicons" style="color : #f4511e; margin-left: 40%;">
</p>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
When I use img-responsive, the image becomes small when the
browser increases the "tablet-size". But is perfect for mobile-size and tablet-size browser.
When I change img-responsive to image-fluid, the image size
is what i want for the desktop-size browser.
But the <p> elements gets overlapped on it during the resizing of the browser. Also when I resize the browser to "mobile-size"(using image-fluid), I get a horizontal scroll-bar for my image since it doesn't resize and stays as it was on desktop-size browser.
What has to be removed in my code to make it responsive(with height and width being responsive) on all screens?
My second problem is that, i have to use an empty div from left for 2 cols to place my image at the center of the screen (third line from top). Can I place my div(using col-*-*) in the center without using any empty div tags. ? Is there any css code for that ?
I used padding-left : 12% to make the size of the <ul> small and be on the right side of the column. Can it be resized and placed on right without using padding-left ?
For your first problem, i found a quick fix by setting style="max-width:100%;height:auto;" on your image (max-width prevent the image to overflow, height auto keeps the proportions).
Your second problem is just a bootstrap class you are missing : col-XX-offset-X, in your example you need to set <div class=col-sm-4 col-sm-offset-2>
For your third question, you can avoid the padding by setting on your right aligned element a width and a left marginlike so :
<ul class="list-group" style="background-color: #6ABED8;width:60%;margin:0 0 0 auto">
Hope that helps
I'm not sure if I'm doing something wrong or if this is the intended result but the I'm using semantic ui's sidebar and it pushes everything past the max screen width. Am I missing something here?
<div class="ui bottom attached segment pushable">
<div class="ui left vertical menu visible thin attached inverted sidebar">
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
<div class="pusher">
<div id="search-bar">
<div class="ui fluid action input">
<input placeholder="Search..">
<div class="ui green button"> Search </div>
</div>
</div>
<h3 class="ui block header">
Item
</h3>
</div>
</div>
https://jsfiddle.net/kour6d1x/
If you don't want the content "pushed" for the Semantic UI sidebars you should use the .overlay class on it - relevant demos
Like the class name suggests, it will overlay the sidebar rather than pushing the content along with it.
Add overlay class to the <div class="ui left vertical menu visible thin attached inverted sidebar"> element.
JSfiddle
I have used below css to reduce thr width of pusher when sidebar is open. In below code 58px is the width of sidebar
.sidebar.visible + .pusher{
margin-right: 58px;
}
Custom CSS subtracting the width of the sidebar would do the trick:
.sidebar.visible + .pusher {
width: calc(100% - 260px);
}
I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.
I'm facing I think odd problem. I have website http://www.spacemind.ggpro.pl/ar/ and I'm trying to make this top menu (black rectangle) Stick to the left side of my Wrapper div.
<div style="z-index:9999;background-color:#000;right:0px;width:80%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
Now I use value width:80% but I hope that there is some way to stick it to left side of wrapper. I want this menu to be always (no matter what resolution user uses) in the position as in the image below: http://i.stack.imgur.com/QMLvO.jpg
Try this code:
<div style="width:980px;margin:auto;position:relative;">
<div style="z-index:9999;background-color:#000;right:0px;width:100%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
Of course inline styling is a bad idea. You should put it in some classes.
To the first div that comes immediately after your body tag assign the following property:
left: 0;
The question may sound a bit... stupid. But I'm kinda stuck.
I'm using Twitter Bootstrap. My test code is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background:#eee; border:1px solid blue;">
<ul class="nav nav-list">
<!-- List contents -->
</ul>
</div><!--/span-->
<div class="span9" style='background:#fff; padding-left:10px; border:1px solid red'>
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website...</p>
<p><a class="btn btn-primary btn-large">Learn more ยป</a></p>
</div>
<div class="row-fluid">
<!-- The content -->
</div><!--/row-->
</div>
</div>
</div>
And this is what it looks like (I'm using colored borders to show you WHERE each of the 2 divs is) :
Now, my question is :
Is there any way I could have the second, red-bordered, div (span9) occupy THE WHOLE rightmost column (without any margins around it), so that the final result looks like :
the Control Panel on the left (a whole column with with that gray-ish background)
the right-most div on the right (occupying all of the remaining space, with a white background)
I don't have much experience with twitter bootstrap, but I'm assuming that the answer would be to look at the css properties for your 'row-fluid' class and check the margin and width.
margin: 0 auto; will give remove any margin (space around the outside of the div) and center it in the container
if ^ is already true, width=50%; (if you're going to have both side by side)
Hope that helps!