I'm having trouble trying to figure out how to get the navigation on a site aligned properly. What I'm trying to do is have the navigation start at the left side of the page and stop at about 100px from the right side of the main content container div. The navigation is going to be in it's own container with no parent containers (unless someone has a solution that requires otherwise). At the end of the navigation I am going to put an image. The end result will look something like this:
My main problem is figure out how to set the widths and still be flexible for different screen resolutions. How would I go about doing this?
If you are going to put an image at the end and you want responsiveness, then you may want to consider to wrapper it in parent container.
<div class="parent">
<div class="leftside">
<div class="topmenu"></div>
<div class="botmenu"></div>
</div>
<div class="right-side">
<img src="image.png" />
</div>
</div>
See if this fiddle helps
Related
Im trying to make my sidebar content follow the scrolling but stop at the footer. Currently, any content i place goes too far and overlaps the footer.
<div class="row row-no-padding">
<div class="col-lg-8">
Content is here.
</div>
<div class="col-lg-4">
Sidebar content would be here. I want all content here to follow my scrolling
but stop if if i go too far(stop at the footer).
</div>
</div>
Please help me with this. I know this is a minimalist example but i've tried so many combinations at this point that i dont know what the hell to write.
I've tried position:fixed but it makes the content overlap the footer. position:sticky doesnt do anything, or im not using it properly.
I am trying to set my position statically to the right side of the screen as thats where the logo I am trying to keep is. On different monitors it will flow of the screen.... Is there a way to set this statically, this is what I have right now for my slide... (using a parallax theme so I cannot force the position throughout the page, just the slide.)
<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2018/08/ITData_HomePage2018_01.jpg);">
<div class="slide-body">
<div class="container">
<div class="slide-caption">
<div class="slide-content">
<h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
</div>
<h2 class="slide-title">Let us help you develop an IT Optimization Strategy and Define your technological priorities</h2>
<a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=a588c51b-d8d4-4089-90c1-df8e14656af2&customize_autosaved=on&customize_messenger_channel=preview-2" target="_self">Learn how we can help you succeed</a>
</div>
<div class="slide-image">
</div>
</div>
</div>
</div>
This is what I've tried in CSS so far along with fixed positions (broke the page)
#slide-6996 {
width: 100%;}
Is there a way to keep the width at 100% and lock the image to the right of the slide and still be able to scroll past using CSS?
Assuming you are referring to the logo shown in the main image that is added as a background image then all you need to do is add the following:
#slide-6996 {
background-position: right;
}
This will keep the background aligned to the right so that the logo remains on the page however it will eventually slide under your text at smaller layouts. Perhaps you should use a media query to switch the alignment back to left at that point.
Another unfortunate side effect is due to the fact you have a whitebar on that side of your image you are going to be stuck with that unless you use an image without that. To save you the trouble ive edited it out myself and uploaded the image here: https://ibb.co/12dNQdn
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
I am working on converting a twitter bootstrap theme into a wordpress theme and adding onto it.
I am having issues adding full width items into the theme. I have tried adding a slider plugin that is set to full width. Although when it is added it goes to a fixed width, the same happens if I add an image aswell. It seems all of the content in my page does this except for my header and footer.
Also it seems every time I add in anything to the page the page/footer gets messed up. I am still learning css though.
I am posting a link to the site to see if anyone can take a look and give me a hand.
http://goo.gl/8JUDA
It looks like you contained the element that you want to stretch the size of the window within a .container div.
.container is used in bootstrap for fixed layouts. Instead try using the .container-fluid class.
For example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
Read more: http://twitter.github.io/bootstrap/scaffolding.html#layouts
I a situation I run into often, but my homebrew methods don't stack up to a good solution.
What I'd like to do is to have a menu beside a logo, while being responsive.
It looks like so
=======
logo =
==============Menu=======================
===============================================
The way my html looks is like so
<div id="logo">
<img src=""... />
</div>
<div id="menu">
<ul>...
</ul>
</div>
Now I want to position the menu at the bottom of the logo, but I have no idea how to do it. I can use margins, but than, once the responsiveness kicks in on mobile browsers and then the menu goes under the logo, there will be a large margin there too.
How would I deal with this?
Try to use responsive-design framework such as zurb-foundation it will offer you this requirement easily. Look at this example on its official documentation about Top Bar