CSS - Using the left float property inline

.htabs { /* horizontal tabs */
    display: table;
}

.htabs li { /* horizontal tab */
    position: relative;
    float: left;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAMklEQVQIW2M8e3r/fw4OdgZk8OPHTwbGq5eP/QcxYJIwNlgCpBokAAIwBfglsBqFy3IAqdosZ0m+BQ8AAAAASUVORK5CYII=);
    border-left: 1px solid #e1dfd2;
    border-top: 1px solid #e1dfd2;
    border-right: 1px solid #e1dfd2;
    margin-right: 1px;
    display: table-row;
}

.htabs li a { /* horizontal tab link */
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #444444 !important;
    text-shadow: -1px -1px rgba(229,227,215,1), 1px 1px rgba(229,227,215,1);
    z-index: 1;
    padding: 0 7px;
    line-height: 30px; 
}

I'm in the process of creating a website with full responsiveness and could use some guidance. As shown in the image, when I resize the browser window to a smaller size, the "tabs" move to the second line, which is not visually appealing. How can I ensure that they remain on one line?

css

Answer №1

Your current design may not be as responsive as you think!

When creating responsive layouts, it's important to plan for various screen resolutions. Consider common sizes like 320px for smartphones in portrait mode, 768px for tablets in portrait mode, and 1024px for tablets in landscape mode.

To achieve a responsive website, make use of Media queries. For instance,

@media screen and (max-width: 960px) {      
    #content {
        margin: 0 20px 0 0;
    }
}

In your scenario, determine the specific screen sizes for different designs.

@media screen and (max-width: 960px) { 


@media screen and (max-width: 758px) { 


}

@media screen and (max-width: 524px) { 

}

Follow a step-by-step guide on how to Create a responsive website with media queries

UPDATE: Added width: 20%; to .htabs li to allow shrinking of li tags. Adjust font size based on browser size by including the following instructions in each media query and adjusting accordingly:

.htabs li { /* horizontal tab */
    width: 20%;
    ....
}

.htabs li a {
    font-size: 10px;
}

Answer №2

It is recommended to enclose the menubar within a designated element that has specified height and width in order to prevent any issues. Additionally, be sure to include the attribute overflow:hidden on this enclosing wrapper.

Answer №3

It is recommended to use "%" or "em" for padding or width instead of "px" in responsive design.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reverse the orientation of the SVG image, for instance, the graph

I've been experimenting with creating a bar graph using SVG, but I'm struggling to understand how it works. I tried rotating an existing graph upside down, but there seems to be a small offset. You can view the corresponding jsfiddle here - http: ...

csshtmlsvg

A guide to the bottom border of text inputs in React Native

Trying to create a borderless text input has been a challenge for me. After applying the necessary properties, a bottom border line in black color appeared. View image of text input I am looking for a way to remove this border completely. import { TextIn ...

javascriptcssreactjsreact-native

Implementing a Flexible YouTube Video Display with API Integration

Is there a way to recreate this design? Check out the DEMO HTML <header role="banner"> <div id="wrapper-video"> <video poster="" autoplay loop> <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/cut.mp4" ...

phphtmlcssyoutube

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

Importance of prioritizing CSS files on a webpage with multiple stylesheets

Utilizing various CSS files has helped me organize my code, but it has also introduced some styling priority conflicts where certain codes overwrite others. I am now exploring ways to prioritize the CSS files to ensure that high-priority files are not ove ...

htmlcss

Elevate the HTML dropdown above all other elements on the page

Currently, I am utilizing a dropdown widget from http://www.w3schools.com/ : <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href= ...

htmlcssdrop-down-menu

When pasting Arabic text into an input box, the words in HTML appear to be jumbled and shuffled around

When I replicate this text يف عام and input it into a box, the output is shown as follows عام يف ...

javascriptcsshtmlarabic-support

Modify the color of the text for the initial letter appearing in the sentence

I am currently exploring the possibility of altering the font color of the initial instance of a letter in a div. For example, if the String were 'The text' and I desired to make the color of 'e' yellow, then only the first e would be i ...

htmlcssangularjs

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

cssfont-face

How can I modify the CSS styles for a custom jQuery widget?

I have been working on creating a custom widget with a textarea that has multiple rows. I am now looking to change the background color of this widget on the Onfocus and OnfocusOut events. Can anyone guide me on how to achieve this? <!doctype html> ...

jqueryhtmlcssjquery-ui

What is the best way to extract a thumbnail image from a video that has been embedded

As I work on embedding a video into a webpage using lightbox, I'm looking for advice on the best design approach. Should the videos be displayed as thumbnails lined up across the page? Would it be better to use a frame from the video as an image that ...

javascriptjquerycsshtml

"Effortless alignment: Centralizing CSS styling across the entire

I need help placing a loading spinner in the center of my screen, ensuring it works on both mobile and desktop devices. Here is my current CSS code: .spinner { width: 100px; height: 100px; position:absolute; top: 50%; left: 50%; margin: 100px ...

htmlcssruby-on-rails-5

What improvements does IE7 offer compared to IE6?

Many developers in the web development industry often express frustration when it comes to developing for IE6. But when working with a powerful JavaScript framework such as jQuery, does the process of developing for IE6 differ significantly from that of ...

javascriptcssinternet-explorer-6internet-explorer-7

An iframe perfectly centered both horizontally and vertically, featuring a 16:9 aspect ratio and utilizing the maximum screen space without any cropping

Specifications: It is mandatory for the iframe to be enclosed within a div container as shown in the code below. The container should have the flexibility to adjust to any valid width and height using the vw and vh viewport units. Check the code provided ...

javascripthtmlcssiframeresponsive-design

Placing a FontAwesome icon alongside the navigation bar on the same line

Upon login, the navigation bar experiences display issues. Prior to logging in: https://i.stack.imgur.com/ZKyGe.jpg Following successful login: https://i.stack.imgur.com/zyP3m.jpg An obstacle I'm facing involves the Log Out fontawesome icon wrappi ...

htmlcss

Positioning elements in relation to their parent container is key

I'm exploring the idea of positioning content after an absolutely positioned div that is nested within a relatively positioned div, without knowing the height of the relative div. Essentially, I have set up the following structure ... <div style= ...

css

How to prevent npm from being accessed through the command prompt

I recently began working on a ReactJs project. However, I am facing an issue where after starting npm in Command Prompt, I am unable to enter any text. Should I close the cmd window or is there a way to stop npm? You can now access your project at the fol ...

javascriptcssreactjsnpmcmd

Attempting to incorporate a vibrant hover effect into a sleek carousel design

I am struggling to implement a hover effect with color on an image within a slick carousel on my Wordpress website. I have been exploring various options but haven't found a solution yet. ...

csswordpressplugins

The motion of a Wordpress website varies

Whenever I click on the logo of my website, an issue arises where the entire page shifts to the right side and then returns back to its original position. It only requires one or two clicks for this problem to occur, but it is definitely present. Thank yo ...

htmlcsswordpressheaderweb

Why is it impossible for me to delete the class / property of this object?

Within a series of nested divs, there are additional divs containing multiple imgs. The goal is to cycle through these images using CSS transitions. To achieve this, a JavaScript object was created to track the divs, sub-divs, and images. Three arrays were ...

javascripthtmlcssarrays